如何在包装器 div 中并排显示 div？

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？

How do I display div's next to each other within a wrapper div?

html

css

alignment