用于显示div标签的css

Question

我想在容器div标签asn框中显示三个div标签b1，b2，b3。 我想显示b1，b2，b3 div标签，其中我标记为绿色。但现在它显示在我用红色标记的位置。我已经使用了类似的概念。这个代码对我没用。现在我只是试过一个div b1。

＆＃13;

＆＃13;

.box{
  height:500px;
  border-style: solid;
  border-width: 2px;
  border-color: red;
}  
.b1{
  width:250px;
  height:175px;
  border-style: solid;
  border-width: 2px;
  border-color: #0000A0;
  margin:0;
  padding:10px 0px 0 50px;
  float:left; 
}

＆＃13;

     <div class="box">
         <div class="b1">
         </div>  <!--end of emp div --> 
         <div class="b2">
         </div>  <!--end of cli div --> 
         <div class="b3">
         </div>  <!--end of doc div -->  
     </div> <!--end of box div -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

.wrap {
  height: 500px;
  border-style: solid;
  border-width: 2px;
  border-color: red;
  text-align: center;
}
.box {
  width: 25%;
  margin-top:5px;
  height: 175px;
  border-style: solid;
  border-width: 2px;
  border-color: #0000A0;
  padding: 10px 0px 0 50px;
  display: inline-block;

}

<div class="wrap">
  <div class="box b1">
  </div>
  <!--end of emp div -->
  <div class="box b2">
  </div>
  <!--end of cli div -->
  <div class="box b3">
  </div>
  <!--end of doc div -->
</div>
<!--end of box div -->

Answer 2

喜欢这个？我已将box更改为wrap，但将box类添加到您的每个框中。此外，我已为每个框定义了以％为单位的宽度，并添加了属性diplay: inline-block，而不是float:left。

注意：请查看整页摘录

＆＃13;

＆＃13;

html,
body,
div {
  box-sizing: border-box;
}
.wrap {
  height: 500px;
  border-style: solid;
  border-width: 2px;
  border-color: red;
  text-align: center;
}
.box {
  width: 25%;
  height: 175px;
  padding: 10px 10px 0 10px;
  display: inline-block;
  text-align: left;
  margin-left: 20px;
  margin-right: 20px;
}

＆＃13;

<div class="wrap">
  <div class="box b1">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
  </div>
  <!--end of emp div -->
  <div class="box b2">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
  </div>
  <!--end of cli div -->
  <div class="box b3">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
  </div>
  <!--end of doc div -->
</div>
<!--end of box div -->

＆＃13;

＆＃13;

＆＃13;

Answer 3

.wrap { 
    padding: 10px 0; 
    background: green;
}
.box {
    width: 80%; 
    overflow: hidden;
    margin: 0 auto;
}
.b {
    width: 30%;
    margin: 1%;
    background: white;
    float: left;
    height: 100px;
}

<div class="wrap"><div class="box">
    <div class="b1 b"></div>
    <!--end of emp div -->
    <div class="b2 b"></div>
    <!--end of cli div -->
    <div class="b3 b"></div>
    <!--end of doc div -->
</div></div>
<!--end of box div -->