Question

我有3个相同的divs固定宽度。每个文本包含不同长度的文本和另一个{strong>正确浮动的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

如果您刚刚在.con div水平对齐后，您需要做的就是将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

试试这个，我通过flexbox

<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 - ＆gt;使用此解决方案，您可以更灵活地以任何特定方式选择框的行为，这是一个绝对值得了解的概念。

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

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

具有各种文本长度的几个“div”的水平对齐

4 个答案: