Question

我遇到浮动/对齐问题，似乎无法弄明白。当我将一些DIV漂浮在彼此旁边时，它们就像它们应该排列一样...直到其中一个DIV的文本落到第二行。

如果您看下面，您可以看到第1行显示的方式。如您所见，ABCD位于同一行的其他DIV旁边。

在第2行你可以看到EFGH如何落到另一条线上，即使前一行有足够的空间。

我怎样才能让DIV总是坐在一起，无论有多少行文字？

非常感谢任何帮助！

SCREENSHOT

#sample-list {
  margin-bottom: 35px;
  float: left;
  width: 400px;
  background: orange;
  word-wrap: break-word;
}

.sample-overview {
  width: 100%;
  float: left;
  font-family: "open sans", "arial";
  font-size: 12px;
  line-height: 14px;
  margin-bottom: 20px;
  word-wrap: break-word;
}

.sample-name-wrap {
  width: 100%;
  white-space: normal;
}

.sample-name {
  float: left;
}

.sample-dash {
  float: left;
  margin: 0 5px;
}

.sample-div {
  float: left;
  background: #ccc;
}

<div id="sample-list">

  <div class="sample-line">
    <div class="sample-overview">
      <div class="sample-name-wrap">
        <div class="sample-name">
          <a href="">Line 1: ostrum exercitationem ullam corporis</a>
        </div>
        <div class="sample-dash">–</div>
        <div class="sample-div">ABCD</div>
      </div>
    </div>
  </div>

  <div class="sample-line">
    <div class="sample-overview">
      <div class="sample-name-wrap">
        <div class="sample-name">
          <a href="">Line 2: atis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab sdaf sfffdaf ntoowerf jdj</a>
        </div>
        <div class="sample-dash">–</div>
        <div class="sample-div">EFGH</div>
      </div>
    </div>
  </div>

  <div class="sample-line">
    <div class="sample-overview">
      <div class="sample-name-wrap">
        <div class="sample-name">
          <a href="">Line 3: vitae dicta sunt explicabo. Nemo enim</a>
        </div>
        <div class="sample-dash">–</div>
        <div class="sample-div">IJKL</div>
      </div>
    </div>
  </div>

</div>

CODEPEN

https://codepen.io/anon/pen/aEqjRo

Answer 1

尝试以下代码。我想你根本不需要使用花车。改为使用跨度。它们具有内联显示属性。

＆＃13;

.container {
max-width: 300px;
}

＆＃13;

<div class="container">
  <div>
  Lorem Ipsum bla bla bla bla bla bla bla bla bla bla bla blabla bla bla
  <span> - </span>
  <span> ABCD </span>
  </div>

  <div>
  Lorem Ipsum bla bla bla bla bla bla bla bla bla bla bla blabla bla bla
  <span> - </span>
  <span> EFG </span>
  </div>

  <div>
  Lorem Ipsum bla bla bla bla bla bla bla bla bla bla bla blabla bla bla
  <span> - </span>
  <span> HIJ </span>
  </div>
 </div>

＆＃13;

Answer 2

使用内联元素而不是浮动div可以解决问题。请参阅https://codepen.io/anon/pen/VyQGWM?editors=1100。

<div id="sample-list">

    <div class="sample-line">
        <div class="sample-overview">
            <div class="sample-name-wrap">
                <a href="">Line 1: ostrum exercitationem ullam corporis</a>
                <span class="sample-dash">
                    –
                </span>
                <span class="sample-span">
                    ABCD
                </span>
            </div>
        </div>
    </div>

    <div class="sample-line">
        <div class="sample-overview">
            <div class="sample-name-wrap">
                <a href="">Line 2: atis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab sdaf sfffdaf ntoowerf jdj</a>
                <span class="sample-dash">
                    –
                </span>
                <span class="sample-span">
                    EFGH
                </span>
            </div>
        </div>
    </div>

    <div class="sample-line">
        <div class="sample-overview">
            <div class="sample-name-wrap">
                <a href="">Line 3: vitae dicta sunt explicabo. Nemo enim</a>
                <span class="sample-dash">
                    –
                </span>
                <span class="sample-span">
                    IJKL
                </span>
            </div>
        </div>
    </div>

</div>

#sample-list {
    margin-bottom: 35px;
    float: left;
    width: 400px;
    background: orange;
    word-wrap: break-word;
}
.sample-overview {
    width: 100%;
    float: left;
    font-family: "open sans", "arial";
    font-size: 12px;
    line-height: 14px;
    margin-bottom: 20px;
    word-wrap: break-word;
}
.sample-name-wrap {
    width: 100%;
    white-space: normal;
}
.sample-dash {
    margin: 0 5px;
}
.sample-span {
    background: #ccc;
}

如果您想知道为什么会这样，请访问https://codepen.io/anon/pen/QaQVqP。唯一的变化是CSS边框，它说明了为什么你的浮动div包装到下一行。

Answer 3

尝试使用css Display属性。将Display: inline;设置为容器，以便容器div中的DIV彼此相邻。希望这有帮助！

当文字换到第二行时，Div不浮动？

3 个答案: