具有不同文本长度的多个'divs'的水平对齐

Question

我有 3 个相同divs的固定宽度。每个都包含不同长度的文本和另一个向右浮动的div。

当文本长度相等时，它们会自动对齐，没有任何问题。但是当文本长度不同时，对齐方式会发生巨大变化。我尝试使用各种设置进行修复，但没有成功，我希望它们水平对齐，无论文本长度如何！

这里缺少什么？

.con {
  width: 300px;
  height: 200px;
  display: inline-block;
  background: #996600;
  text-align: left;
  margin: 0px;
  padding: 0px;
}
.box {
  width: 150px;
  height: 150px;
  background-color: #333333;
  position: relative;
  float: right;
  margin: 0px, ;
  padding: 0px;
}
.main {
  text-align: center;
}

<div class="main">
  <h1 class="topic"> Topic goes here </h1>
  <div class="con">
    <div class="box"></div>
    <p class="para">My text, short text</p>
  </div>
  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here even though it did not work properly, normal length</p>
  </div>
  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here, even though it did not work properly, with extra text</p>
  </div>
</div>
</div>

Answer 1

如果你刚刚在.condiv 水平对齐之后，你需要做的就是将vertical-align:top;添加到.con：

.con {
  vertical-align:top;
  width: 300px;
  height: 200px;
  display: inline-block;
  background: #996600;
  text-align: left;
  margin: 0px;
  padding: 0px;
}
.box {
  width: 150px;
  height: 150px;
  background-color: #333333;
  position: relative;
  float: right;
  margin: 0px, ;
  padding: 0px;
}
.main {
  text-align: center;
}

<div class="main">
  <h1 class="topic"> Topic goes here </h1>
  <div class="con">
    <div class="box"></div>
    <p class="para">My text, short text</p>
  </div>
  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here even though it did not work properly, normal length</p>
  </div>
  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here, even though it did not work properly, with extra text</p>
  </div>
</div>
</div>

Answer 2

您可以使用

flexbox来执行此操作，在这里，通过给main一个display: flex并将topic设置为width: 100%来完成，以便它始终占据第一行。

.main {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}
.topic {
  width: 100%;
}
.con {
  width: 300px;
  height: 200px;
  display: inline-block;
  background: #996600;
  text-align: left;
  margin: 0px;
  padding: 0px;
}
.box {
  width: 150px;
  height: 150px;
  background-color: #333333;
  position: relative;
  float: right;
  margin: 0px, ;
  padding: 0px;
}

<div class="main">
  <h1 class="topic"> Topic goes here </h1>
  
  <div class="con">
    <div class="box"></div>
    <p class="para">My text, short text</p>
  </div>
  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here even though it did not work properly, normal length</p>
  </div>
  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here, even though it did not work properly, with extra text</p>
  </div>
</div>
</div>

如果您希望con不换行，这里有一个版本使用wrapper将它们保持在 1 行中

.main {
  text-align: center;
}
.cons {
  display: flex;
  min-width: 720px;
}
.con {
  width: 300px;
  height: 200px;
  display: inline-block;
  background: #996600;
  text-align: left;
  margin: 0px;
  padding: 0px;
}
.box {
  width: 150px;
  height: 150px;
  background-color: #333333;
  position: relative;
  float: right;
  margin: 0px, ;
  padding: 0px;
}

<div class="main">
  <h1 class="topic"> Topic goes here </h1>
  
  <div class="cons">
  <div class="con">
    <div class="box"></div>
    <p class="para">My text, short text</p>
  </div>
  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here even though it did not work properly, normal length</p>
  </div>
  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here, even though it did not work properly, with extra text</p>
  </div>
  </div>
</div>

Answer 3

试试这个，我是通过弹性框完成的

<div class="main">
  <h1 class="topic"> Topic goes here </h1>
  <div class="con-items">
  <div class="con">
    <p class="para">My text, short text</p>
     <div class="box"></div>
  </div>
  <div class="con">
    <p class="para">My text goes here even though it did not work properly, normal length</p>
    <div class="box"></div>
  </div>
  <div class="con">
    <p class="para">My text goes here, even though it did not work properly, with extra text</p>
    <div class="box"></div>
  </div>
  </div>
</div>
.con-items {
    display: flex;
    justify-content: space-between;
}
.con {
  width: 300px;
  height: 200px;
  display: flex;
  background: #996600;
  text-align: left;
  margin: 0px;
  padding: 0px;
}
.box {
  min-width: 150px;
  max-width: 150px;
  background-color: #333333;
  position: relative;
  margin: 0px, ;
  padding: 0px;
}
.con p {
    width: 100%;
}
.main {
  text-align: center;
}

现场演示 - https://jsfiddle.net/grinmax_/5139we1o/

Answer 4

问题的解决方案要么是黑客宽度负边距：https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/

这将导致相同高度的框，并消除有关对齐的不需要的行为。

或者正如我建议的更现代的版本一样，您尝试使用 flex 属性：https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties ->使用此解决方案，您可以更灵活地以任何特定方式选择盒子的行为，这是一个绝对值得了解的概念。

我最近使用flex创建了与您相同的概念，我可以告诉您这是实现您想要的最佳方法。flex 的唯一问题是 IE 11 的浏览器支持。但这仍然是这样做的方法。

http://caniuse.com/#feat=flexbox