中心三个div容器彼此相邻

时间：2017-06-07 20:19:59

标签： html css

我希望三个div在中间居中。最后它应该看起来像enter image description here

现在我的问题。在我的CSS中，我使用了float关键字，但似乎这不起作用。 div仍然分裂。

正如您在下面的代码示例中看到的那样，容器变得很奇怪。

如果有人可以帮助我，那会很棒！

＆＃13;
＆＃13; 
#selectionElementContainer {
  height: 70%;
  width: 100%;
  margin-top: 50px;
}

#selectionElementLeft {
  float: left;
}

#selectionElementCenter {
  margin: 0 auto;
}

#selectionElementRight {
  float: right;
}

.selectionElementImage {
  cursor: default;
  text-align: center;
  margin-top: 10px;
}

.selectionElementHeader {
  cursor: default;
  text-align: center;
  font-size: 30px;
  margin-top: 30px;
  color: #333f4b;
}

.selectionElementText {
  cursor: default;
  text-align: center;
  margin-top: 20px;
  font-size: 18px;
  color: #4c545c;
}

.selectionElementLinkContainer {
  cursor: default;
  margin-top: 10px;
}

.selectionElementBtn {
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: none;
  font-size: 18px;
  background-color: white;
  color: #1bbee7;
  transition: 0.5s;
}

.selectionElementBtn:hover {
  color: #a4d662;
  transition: 0.5s;
}
＆＃13; 
    <div id="selectionElementContainer">
      <div id="selectionElementLeft">
        <div class="selectionElementImage">
          <img src="bild">
        </div>
        <div class="selectionElementHeader">
          Title
        </div>
        <div class="selectionElementText">
          Text
        </div>
        <div class="selectionElementLink">
          <button class="selectionElementBtn">Link</button>
        </div>
      </div>
      <div id="selectionElementCenter">
        <div class="selectionElementImage">
          <img src="bild">
        </div>
        <div class="selectionElementHeader">
          Title
        </div>
        <div class="selectionElementText">
          Text
        </div>
        <div class="selectionElementLink">
          <button class="selectionElementBtn">Link</button>
        </div>
      </div>
      <div id="selectionElementRight">
        <div class="selectionElementImage">
          <img src="bild">
        </div>
        <div class="selectionElementHeader">
          Title
        </div>
        <div class="selectionElementText">
          Text
        </div>
        <div class="selectionElementLinkContainer">
          <button class="selectionElementBtn">Link</button>
        </div>
      </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

6 个答案:

答案 0 :(得分：2)

在这种情况下，检查flexbox父容器是否已弯曲，子容器是否具有特定情况的列方向。您可以使用伪元素nth-child(n)来定位嵌套元素，例如.flex-child:nth-child(2) h2 {color: green;}将使第二个<h2>绿色Fiddle 

#flex-parent{
  display:flex;
  width: 100%;
  justify-content: space-around;
  flex-wrap: wrap;
}

.flex-child{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.flex-child img{
  border-radius: 50%;
}

.flex-child a{
  margin-bottom: 20px; /*So you can have space when the screen resize*/
}
<div id="flex-parent">
  <div class="flex-child">
    <img src="https://placehold.it/100x100">
    <h2>Title</h2>
    <p>Text</p>
    <a href="#">Link</a>
  </div>
  <div class="flex-child">
    <img src="https://placehold.it/100x100">
    <h2>Title</h2>
    <p>Text</p>
    <a href="#">Link</a>
  </div>
  <div class="flex-child">
    <img src="https://placehold.it/100x100">
    <h2>Title</h2>
    <p>Text</p>
    <a href="#">Link</a>
  </div>              
</div>

答案 1 :(得分：1)

如果您要使用浮动，请将所有项目浮动到左侧。你的中心元素占据了容器元素的整个宽度并向下推动了第三个元素。

除此之外，看起来你过度设计了一些东西。请参阅下面的示例，了解如何简化标记和CSS并使其更具语义性。

＆＃13;
＆＃13; 
.selection {
  box-sizing: border-box;
  float: left;
  width: 33.33333%;
  padding: 1rem;
  text-align: center;
}

.selection img {
  display: block;
  max-width: 100%;
  height: auto;
}
＆＃13; 
<div id="selections">

  <div class="selection">
    <img src="http://placehold.it/400x400/fc0">
    <h2>Title 1</h2>
    <p>
      Text
    </p>
    <a href="#">Link</a>
  </div>

  <div class="selection">
    <img src="http://placehold.it/400x400/">
    <h2>Title 2</h2>
    <p>
      Text
    </p>
    <a href="#">Link</a>
  </div>

  <div class="selection">
    <img src="http://placehold.it/400x400/fc0">
    <h2>Title 3</h2>
    <p>
      Text
    </p>
    <a href="#">Link</a>
  </div>
  
</div>
＆＃13;
＆＃13;
＆＃13;

如果您希望使用自己的方法更加现代化，请使用flexbox。

＆＃13;
＆＃13; 
#selections {
  display: flex;
}

.selection {
  padding: 1rem;
  text-align: center;
}

.selection img {
  display: block;
  max-width: 100%;
  height: auto;
}
＆＃13; 
<div id="selections">

  <div class="selection">
    <img src="http://placehold.it/400x400/fc0">
    <h2>Title 1</h2>
    <p>
      Text
    </p>
    <a href="#">Link</a>
  </div>

  <div class="selection">
    <img src="http://placehold.it/400x400/">
    <h2>Title 2</h2>
    <p>
      Text
    </p>
    <a href="#">Link</a>
  </div>

  <div class="selection">
    <img src="http://placehold.it/400x400/fc0">
    <h2>Title 3</h2>
    <p>
      Text
    </p>
    <a href="#">Link</a>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

将它们全部浮动并使宽度为33％（大约为三分之一）。我还将文本中心对齐，因为我觉得它看起来更好，但如果你愿意，可以随意省略。

＆＃13;
＆＃13; 
#selectionElementContainer {
  height: 70%;
  width: 100%;
  margin-top: 50px;
}

#selectionElementLeft, #selectionElementCenter,#selectionElementRight {
  float: left;
  width: 33%;
  text-align: center;
}

.selectionElementImage {
  cursor: default;
  text-align: center;
  margin-top: 10px;
}

.selectionElementHeader {
  cursor: default;
  text-align: center;
  font-size: 30px;
  margin-top: 30px;
  color: #333f4b;
}

.selectionElementText {
  cursor: default;
  text-align: center;
  margin-top: 20px;
  font-size: 18px;
  color: #4c545c;
}

.selectionElementLinkContainer {
  cursor: default;
  margin-top: 10px;
}

.selectionElementBtn {
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: none;
  font-size: 18px;
  background-color: white;
  color: #1bbee7;
  transition: 0.5s;
}

.selectionElementBtn:hover {
  color: #a4d662;
  transition: 0.5s;
}
＆＃13; 
<div id="selectionElementContainer">
  <div id="selectionElementLeft">
    <div class="selectionElementImage">
      <img src="bild">
    </div>
    <div class="selectionElementHeader">
      Title
    </div>
    <div class="selectionElementText">
      Text
    </div>
    <div class="selectionElementLink">
      <button class="selectionElementBtn">Link</button>
    </div>
  </div>
  <div id="selectionElementCenter">
    <div class="selectionElementImage">
      <img src="bild">
    </div>
    <div class="selectionElementHeader">
      Title
    </div>
    <div class="selectionElementText">
      Text
    </div>
    <div class="selectionElementLink">
      <button class="selectionElementBtn">Link</button>
    </div>
  </div>
  <div id="selectionElementRight">
    <div class="selectionElementImage">
      <img src="bild">
    </div>
    <div class="selectionElementHeader">
      Title
    </div>
    <div class="selectionElementText">
      Text
    </div>
    <div class="selectionElementLinkContainer">
      <button class="selectionElementBtn">Link</button>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您可以保留现有的CSS，只需更改div的顺序，使其左，右，居中。这样，左右div分别位于左侧和右侧，中间div将在它们之间浮动。

#selectionElementContainer {
  height: 70%;
  width: 100%;
  margin-top: 50px;
  overflow:auto;
}

#selectionElementLeft {
  float: left;
}

#selectionElementCenter {
  margin: 0 auto;
}

#selectionElementRight {
  float: right;
}

.selectionElementImage {
  cursor: default;
  text-align: center;
  margin-top: 10px;
}

.selectionElementHeader {
  cursor: default;
  text-align: center;
  font-size: 30px;
  margin-top: 30px;
  color: #333f4b;
}

.selectionElementText {
  cursor: default;
  text-align: center;
  margin-top: 20px;
  font-size: 18px;
  color: #4c545c;
}

.selectionElementLinkContainer {
  cursor: default;
  margin-top: 10px;
}

.selectionElementBtn {
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: none;
  font-size: 18px;
  background-color: white;
  color: #1bbee7;
  transition: 0.5s;
}

.selectionElementBtn:hover {
  color: #a4d662;
  transition: 0.5s;
}
<div id="selectionElementContainer">
  <div id="selectionElementLeft">
    <div class="selectionElementImage">
      <img src="bild">
    </div>
    <div class="selectionElementHeader">
      Title
    </div>
    <div class="selectionElementText">
      Text
    </div>
    <div class="selectionElementLink">
      <button class="selectionElementBtn">Link</button>
    </div>
  </div>

  <div id="selectionElementRight">
    <div class="selectionElementImage">
      <img src="bild">
    </div>
    <div class="selectionElementHeader">
      Title
    </div>
    <div class="selectionElementText">
      Text
    </div>
    <div class="selectionElementLinkContainer">
      <button class="selectionElementBtn">Link</button>
    </div>
  </div>
  <div id="selectionElementCenter">
    <div class="selectionElementImage">
      <img src="bild">
    </div>
    <div class="selectionElementHeader">
      Title
    </div>
    <div class="selectionElementText">
      Text
    </div>
    <div class="selectionElementLink">
      <button class="selectionElementBtn">Link</button>
    </div>
  </div>
</div>

请注意，我还在您的容器div中添加了overflow:auto，以便容器实际包含浮动的div。

答案 4 :(得分：0)

简单的解释，而不是使用浮动，您可能需要控制父级大小并应用空div，您可以使用 display：inline-block ，如您在 selectionElement类中看到的那样

您可以使用以下内容：

#selectionElementContainer {
  height: 70%;
  width: 100%;
  margin-top: 50px;
}

.selectionElement {
  display: inline-block;
  width: 300px;
  border: #f0f thin solid;
}

.selectionElementImage {
  cursor: default;
  text-align: center;
  margin-top: 10px;
}

.selectionElementHeader {
  cursor: default;
  text-align: center;
  font-size: 30px;
  margin-top: 30px;
  color: #333f4b;
}

.selectionElementText {
  cursor: default;
  text-align: center;
  margin-top: 20px;
  font-size: 18px;
  color: #4c545c;
}

.selectionElementLinkContainer {
  cursor: default;
  margin-top: 10px;
}

.selectionElementBtn {
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: none;
  font-size: 18px;
  background-color: white;
  color: #1bbee7;
  transition: 0.5s;
}

.selectionElementBtn:hover {
  color: #a4d662;
  transition: 0.5s;
}

答案 5 :(得分：-1)

查看此JSFiddle，看看它是否回答了问题。只需要向左漂浮。

float: left;
width:30%;
相关问题
最新问题