使用CSS和HTML如何以这种方式实现输出

Question

我正在尝试编写一些如下所示的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>";

我应该怎么做才能获得想要的输出？

Answer 1

I would create another div for your "shot code", and "phone" text. I've used similar properties to what you have been using before so that it should fall in line with the rest of your styling.

I would also consider renaming your div's to something that isn't a CSS property.

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>

Answer 2

Assuming you can modify the HTML I would restructure it somewhat. That will make your life a lot easier when it comes to getting this styled right, and also styling it in the future.

.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>

You can quite possibly also remove the absolute positioning as well, and replace it all with inline-blocks. It looks like you are going for something more like this:

.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>

But I'm not sure what other requirements you have, so can't say for sure. You have a few options here. Hope some of it is helpful.

Answer 3

You could use float and with properties, like that :

.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>

Of course, you have to adapt this code to your case.