Question

我试图在另一个div（包含h1和下面的一段小文本）下面并排获得3个div。我在做这件事时遇到了一些麻烦。

我的目标是这样的：

我试图在主标题div下面加上一个div（包含其他3个div）。

我试过这个CSS：

.content-info {
    text-align: center;
    font-family:'Montserrat', sans-serif;
    top: 80%;
    left: 50%;
    text-align:center;
}
/* this is for the 3 divs to set width, etc*/
.content-info div {
    width:300px;
    padding:25px;
    margin: 25px;
}

这是迄今为止我所掌握的JSFiddle：http://jsfiddle.net/4zx9gxgL/

有任何建议/想法吗？

Answer 1

您可以使用display:table-row和display:table-cell使其与表格类似。

例如：

.content-info {
    text-align: center;
    font-family:'Montserrat', sans-serif;
    display: table-row;
}
.content-info div {
    width:300px;
    padding:25px;
    margin: 25px;
    display: table-cell;
}

您可以删除css中的.one{}，.two{}，.three{}

Answer 2

有几种方法可以解决这个问题。 CSS table，float和position提供了三种可能的解决方案。根据您的总体目标，此处的解决方案为inline-block（无table，无float，无position）。该解决方案非常简单，稳定，响应迅速，易于定制。

DEMO： http://jsfiddle.net/nayztL4y/2/

<强> HTML

<div class="container">
    <h1>H1 Header</h1>
</div>

<div class="container">
    <div class="boxes"><h2>Box 1</h2></div>
    <div class="boxes"><h2>Box 2</h2></div>
    <div class="boxes"><h2>Box 3</h2></div>
</div>

<强> CSS

.container {
    width: 90%;
    height: 200px;
    border: 1px solid black;
    margin-bottom: 10px;
    text-align: center;
    background-color: #ff0;
}

.boxes {
    width: 25%;
    height: 180px;
    border: 2px dashed red;
    margin: 8px 10px;
    display: inline-block;
}

<强>更新
我也更新了您的小提琴演示。
http://jsfiddle.net/4zx9gxgL/33/

Answer 3

.content-info {
    text-align: center;
    font-family:'Montserrat', sans-serif;
    top: 80%;
    left: 50%;
    float:left;
    width:100%;
    text-align:center;
}
/* this is for the 3 divs to set width, etc*/
.content-info div {
    width:300px;
    padding:25px;
    margin: 25px;
    float:left;
}

如果3个底部div未正确对齐，请删除边距设置，或相应调整。

Answer 4

所以你想把所有的三个并排放在一起。我认为就是这样。

 .main-content {
   text-align: center;
font-family:'Montserrat', sans-serif;
position: relative;


}
.content-info {
position: relative;
width: 100%;
height: 110px;
top: 0px;
 }

 .yo{

 display: inline-block;
 width: 33%;
  margin-right: -2px;
  text-align:center;
 }

https://jsfiddle.net/4zx9gxgL/30/

Answer 5

我也去了......

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Montserrat);
 body {
  background: url("http://pre15.deviantart.net/52ce/th/pre/i/2011/174/b/c/candy_blur_abstract_hd_by_ivereor-d3jsglw.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
}
.yx {
  text-align: center;
}
.main-content {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  display: block;
  position: relative;
  top: 20%;
  left: 50%;
  margin-top: 100px;
  height: auto;
  margin-bottom: -100px;
  /* bring your own prefixes*/
  transform: translate(-50%, -50%);
}
.main-content h1 {
  font-size: 62px;
}
.main-content h2 {
  font-size: 32px;
}
.content-info {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.content-info div {
  width: 300px;
  padding: 25px;
  margin: 25px;
}
.one {
  display: inline-block;
  max-width: 33%;
}
.two {
  display: inline-block;
  max-width: 33%;
}
.three {
  display: inline-block;
  max-width: 33%;
}

＆＃13;

<body>
  <div class="main-content yx">
    <h1>Name Here</h1>

    <h2>Hi, I'm Name.</h2>

  </div>
  <div class="content-info">
    <div class="one">
      <h3>BORAT IPSUM</h3>

      <p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
        for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
    </div>
    <div class="two">
      <h3>BORAT IPSUM</h3>

      <p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
        for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
    </div>
    <div class="three">
      <h3>BORAT IPSUM</h3>

      <p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
        for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
    </div>
  </div>
  <footer></footer>
</body>

＆＃13;

将3个div框并排放置在较宽的单个div下方

5 个答案: