С помощью CSS и HTML, как мне добиться результата таким образом
Я пытаюсь написать HTML-код, который выглядит так:
Но то, что у меня сейчас есть, выглядит так:
Это мой код:
<style>
div.relative {
position: relative;
width: 300px;
height: 70px;
border: 2px solid #73AD21;
left: 32px;
text-align: center;
}
div.absolute {
position: absolute;
top: 28px;
right: 0;
width: 200px;
height: 40px;
border: 2px solid #73AD21;
text-align: center;
}
</style>
<div class='relative'>phone <b> 07010710811</b>
shot code <div class='absolute'> <b>123456 </b></div>
</div>";
Что мне делать, чтобы получить желаемый результат?
Хорошо, позвольте мне попробовать
Тот же вывод, который я только что попробовал
Что вы можете изменить? HTML, CSS или и то, и другое?
Я создал ответ, но предполагается, что у вас есть свобода изменять HTML. Дайте мне знать, если это поможет, или если вы ищете что-то еще.
Ответы 3
Я бы создал еще один div для вашего «кода выстрела» и «телефонного» текста. Я использовал свойства, аналогичные тем, которые вы использовали раньше, чтобы они соответствовали остальной части вашего стиля.
Я бы также подумал о том, чтобы переименовать ваши div во что-то, что не является свойством CSS.
div.container {
position: relative;
width: 300px;
height: 70px;
border: 2px solid #73AD21;
left: 32px;
text-align: center;
}
div.shot_code {
position: absolute;
top: 28px;
right: -2px;
width: 200px;
height: 40px;
border: 2px solid #73AD21;
text-align: center;
}
div.shot_text {
position: absolute;
top: 36px;
left: 0;
width: 100px;
height: 40px;
text-align: center;
}
div.phone_text {
position: absolute;
top: 5px;
left: 0;
width: 100px;
height: 40px;
text-align: center;
}<div class='container'>
<div class='phone_text'>phone</div> <b> 07010710811</b>
<div class='shot_text'>shot code</div>
<div class='shot_code'> <b>123456 </b></div>
</div>Вы можете использовать свойства плавать и with, например:
.box{
float :left;
text-align: center;
width: 300px;
}
.top{
width: 100%;
}
.cut{
width: 50%;
float:left;
box-sizing: border-box;
}
.border{
width: 50%;
float:left;
}<div class = "box">
<div class = "top">
Phone 07010710811
</div>
<div class = "cut">
shot code
</div>
<div class = "cut border">
123456
</div>
</div>Конечно, вы должны адаптировать этот код к вашему случаю.
Предполагая, что вы можете изменить HTML, я бы несколько изменил его структуру. Это сделает вашу жизнь намного проще, когда дело доходит до правильного стиля, а также стиля в будущем.
.wrapper {
position: relative;
width: 300px;
height: 70px;
border: 2px solid #73AD21;
left: 32px;
}
.phone-num{
font-weight:bold;
margin-left: 45px;
}
.shot-code-num {
position: absolute;
top: 28px;
right: 0;
width: 200px;
height: 40px;
line-height:40px;
border: 2px solid #73AD21;
text-align: center;
font-weight:bold;
}
.shot-code{
margin-top:20px;
margin-left:20px;
}<div class = "wrapper">
<div class='phone'>phone
<span class = "phone-num">07010710811</span>
</div>
<div class = "shot-code">
shot code
<div class='shot-code-num'> <b>123456 </b></div>
</div>
</div>Вполне возможно, вы также можете удалить абсолютное позиционирование и заменить его встроенными блоками. Похоже, вы собираетесь сделать что-то большее:
.wrapper {
position: relative;
width: 300px;
border: 2px solid #73AD21;
text-align:right;
}
.field{
display:inline-block;
position:relative;
width:300px;
}
.field-label{
display:inline-block;
width:70px;
text-align:left;
padding:10px;
}
.field-value {
display:inline-block;
width: 200px;
height: 40px;
line-height:40px;
border: 2px solid #73AD21;
text-align: center;
font-weight:bold;
}<div class = "wrapper">
<div class = "phone field">
<span class = "phone-label field-label">phone</span>
<span class = "phone-value field-value">07010710811</span>
</div>
<div class = "shot-code field">
<span class = "shot-code-label field-label">shot code</span>
<span class = "shot-code-value field-value">123456</span>
</div>
</div>Но я не уверен, какие у вас есть другие требования, поэтому не могу сказать наверняка. Здесь у вас есть несколько вариантов. Надеюсь, некоторые из них будут полезны.
попробуйте добавить
line-height: 40px;в абсолютный div