Question

我目前正在开发。

我的问题是：我在旁边有2个div，在这2个div中有一个列表。

当div被阻止时，它们会自动定位在旁边。当我希望它们是内联块（哪一个占据页面宽度的50％）时，如果一个列表比另一个列表长，则最小的div会自动定位在旁边的底部。

是否有一种简单而干净的方法可以将它们放在旁边？

我非常确定解决方案正好在我眼前，而且我已经做过了，但也许你可以告诉我更好的解决方案。

例如

＆＃13;

.aside1 {
  width: 100%;
  background-color: darkgrey;
  white-space: nowrap;
}

.aside1>div {
  display: block;
  width: 50%;
  white-space: normal;
  border: 1px solid black;
}

.aside2 {
  width: 100%;
  background-color: darkgrey;
  white-space: nowrap;
}

.aside2>div {
  display: inline-block;
  width: 50%;
  white-space: normal;
  border: 1px solid black;
  margin: 0;
}

＆＃13;

<h2>example 1</h2>

<aside class="aside1">
  <div class="div1">
      <ul>
        <li>Num 1</li>
        <li>Num 2</li>
        <li>Num 3</li>
      </ul>
  </div><div class="div2">
      <ul>
        <li>Num 1</li>
        <li>Num 2</li>
        <li>Num 3</li>
        <li>Num 4</li>
        <li>Num 5</li>
      </ul>
  </div>
</aside>

<h2>example 2</h2>

<aside class="aside2">
  <div class="div1">
    <ul>
        <li>This div</li>
        <li>is at</li>
        <li>the bottom</li>
    </ul>
  </div>
  <div class="div2">
      <ul>
        <li>This div</li>
        <li>is positioning</li>
        <li>normally</li>
        <li>at the</li>
        <li>top</li>
      </ul>
  </div>
</aside>

＆＃13;

谢谢！

Answer 1

一个好主意可能是使用CSS flexbox ：

.aside2{
    display:flex;
    align-items: top;
    [The rest of your rules]
}

有关flexbox的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

请参阅下面的工作代码：

＆＃13;

.aside1 {
  width: 100%;
  background-color: darkgrey;
  white-space: nowrap;
}

.aside1>div {
  display: block;
  width: 50%;
  white-space: normal;
  border: 1px solid black;
}

.aside2 {
  width: 100%;
  background-color: darkgrey;
  white-space: nowrap;
  display: flex;
  align-items: top;
}

.aside2>div {
  display: inline-block;
  width: 50%;
  white-space: normal;
  border: 1px solid black;
  margin: 0;
}

＆＃13;

<h2>example 1</h2>

<aside class="aside1">
  <div class="div1">
      <ul>
        <li>Num 1</li>
        <li>Num 2</li>
        <li>Num 3</li>
      </ul>
  </div><div class="div2">
      <ul>
        <li>Num 1</li>
        <li>Num 2</li>
        <li>Num 3</li>
        <li>Num 4</li>
        <li>Num 5</li>
      </ul>
  </div>
</aside>

<h2>example 2</h2>

<aside class="aside2">
  <div class="div1">
    <ul>
        <li>This div</li>
        <li>is at</li>
        <li>the bottom</li>
    </ul>
  </div>
  <div class="div2">
      <ul>
        <li>This div</li>
        <li>is positioning</li>
        <li>normally</li>
        <li>at the</li>
        <li>top</li>
      </ul>
  </div>
</aside>

＆＃13;

Answer 2

将protected function throttleKey(Request $request) { return Str::lower($request->input($this->username())).'|'.$request->ip(); }添加到vertical-align: top;

Answer 3

我试试这个，这是工作

.aside1 {
  width: 100%;
  background-color: darkgrey;
  white-space: nowrap;
}

.aside1>div {
  display: block;
  width: 50%;
  white-space: normal;
  border: 1px solid black;
}

.aside2 {
  width: 100%;
  background-color: darkgrey;
  white-space: nowrap;
}

.aside2>div {
  vertical-align: top;
  display: inline-block;
  width: 50%;
  white-space: normal;
  border: 1px solid black;
  margin: 0;
}

把div放在一边

3 个答案: