如何在 HTML 頁面中並排放置兩個 div

Question

我創建了一個簡單的 HTML 頁面，其中有一個父div ，在兩個軸上都啟用了溢出。 現在在那個div ，我想並排放置 2 個div 。

 #Result { margin: 0 auto; padding: 0; background-color: rgba(0, 0, 0, .02); padding-top: 25px; font-size: 16px; overflow: scroll; width: 99%; height: calc(100% - 90px - 70px); position: absolute; } #Left, #Right { height: calc(99vh - 90px - 70px); width: 28vw; margin: 0 auto; padding: 0; display: inline-block; float: left; text-align: center; background-color: rgba(0, 0, 0, .04); border-right: 1px solid #a6a6a6; border-bottom: 1px solid #a6a6a6; } #Right { background-color: rgba(0, 0, 0, .5); border-right: 0px solid #737373; padding-left: 15px; margin-right: 15px; width: 2000px; }

 <div id='Result'> <div id='Left'> </div> <div id='Right'> </div> </div>

Codepen - https://codepen.io/Volabos/pen/qBdNyPa?editors=1100

然而不幸的是，如果第三個div的寬度很大，它就會向下移動。 如何並排放置第二個和第三個div ？

Answer 1

浮動可以是一種方式，但我更願意使用 flexbox：

#result {
  display: flex;
  justify-content: space-between  // or flex-start, center, flex-end ... whatever
}

#Left 和 #Right 將並排放置，默認情況下具有相同的高度。

編輯：具有兩個彼此相鄰對齊的子項的容器，包括一個水平滾動條：

  <style>

  .container{
    display: flex;
    justify-content: space-between;
    overflow: scroll;
    border: 1px solid blue;
  }

  .child {
    width: 60%;
    flex-shrink: 0;
    height: 100px;
    border: 1px solid red;
  }

</style>


<div class="container">
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 2

您可以安全地用於父display:flex + overflow:auto和子項flex-shrink:0或min-width:xx

可能的例子

 #Result { display: flex; /* flex model */ overflow: auto; height: 100vh; /* whatever or min-height or let grow from content */ } #Right, #Left { flex-shrink: 0; /* do not allow childd to shrink and allow overflow */ } #Left { width: 28vw; /* whatever */ } #Right { width: 100vw; /* whatever */ } /* demo purpose */ div div { border: solid; } #Left { background: lightblue; } #Right { background: lightgreen; } * { margin: 0; box-sizing: border-box; }

 <div id='Result'> <div id='Left'> </div> <div id='Right'> </div> </div>

Answer 3

 .flex-container { display: flex; align-items: stretch; background-color: #f1f1f1; } .flex-container>div { background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; }

 <div class="flex-container"> <div style="flex-grow: 1">1</div> <div style="flex-grow: 1">2</div> <div style="flex-grow: 8">3</div> </div>

Answer 4

您可以使用float:left; 並且clear:right;

https://codepen.io/osmanraifgunes/pen/PoqzByB?editors=1100

Answer 5

試試這個，如果你不介意稍微調整一下：

 #left { width: 150px; float: left; padding-left: 50px; } #right { /* Change this to whatever the width of your left column is*/ margin-left: 215px; text-align: left; font-size: 18px; } .clear { clear: both; }

 <div id="left"> <p>foo</p> </div> <div id="right"> <p>bar</p> </div> <div id="clear"></div>