Question

我有一个包含所有内容的页面包装器div。此页面div不是整页，而是带边框的95％宽度和高度。

在这个内部，我希望彼此相邻有三个div，比如三个傀儡，然后在它们下面一个。

如何使用CSS执行此操作？

Answer 1

基本上，您希望在CSS中将所需的div显示为display: inline，这样就可以实现div 1,2和3。

HTML：

<div class="wrap">
   <div class="one">1</div>
   <div class="two">2</div>
   <div class="three">3</div>
   <div class="four">4</div>
</div>

CSS：

.wrap{
   height: 95%;
   width: 95%;
   border: 1px solid red;
}

.one, .two, .three{
   display: inline;
   border: 1px solid green;
}

CODEPEN DEMO

Answer 2

这种方式我总是用于网站布局，包括响应式布局。

CSS：

.wraper{
   width: 95%;
   border: 1px solid red;
}
.one, .two, .three{
   display:block;
   width:33%;
   border: 1px solid green;
   box-sizing: border-box;
}
.one{
   float:left;
}
.two{
   margin:0 auto;
}
.three{
   float:right;
}
.four{
   clear:both;
   display:block;
   width:100%;
   border:1px solid red;
   box-sizing: border-box;
}

HTML：

<div class="wraper">
   <div class="one">1</div>
   <div class="three">3</div>
   <div class="two">2</div>
   <div class="four">4</div>
</div>

DEMO

Answer 3

你也可以使用float让div彼此相邻。

HTML：

<div class="wrapper">
      <div class="stack">Stack</div>
      <div class="stack">Stack</div>
      <div class="stack">Stack</div>
      <div class="full">Full</div>
</div>

CSS：

.wrapper {
    height: 95%;
    width: 95%;
}

.stack {
    display: block;
    width: 33%;
    height: 100px;
    float: left;
    border: 1px solid red;
}

.full {
    clear: both;
    width: 100%;
    height: 100px;
    border: 1px solid red;
}

您需要清楚显示完整尺寸的。

如何在包装器div中显示div的旁边？

3 个答案: