如何并排放置div

7 回答

• 1

  给第一个div一个浮动左边并固定，第二个div 100％宽度一个浮动左边 . 这应该够了吧 . 如果你想在它下面放置物品，你需要一个明确的：在你想放在下面的物品上

  回复于 2024-05-07T21:25:31+08:00
• 9

  有很多方法可以满足您的需求：

  • 使用CSS float property：

  <div style="width: 100%; overflow: hidden;">
      <div style="width: 600px; float: left;"> Left </div>
      <div style="margin-left: 620px;"> Right </div>
  </div>
  

  • 使用CSS display property - 可用于使 div 的行为类似 table ：

  <div style="width: 100%; display: table;">
      <div style="display: table-row">
          <div style="width: 600px; display: table-cell;"> Left </div>
          <div style="display: table-cell;"> Right </div>
      </div>
  </div>
  

  有更多的方法，但这两个是最受欢迎的 .

  回复于 2024-05-07T21:25:31+08:00
• 1

  CSS3引入了flexible boxes（又名.flex box），它也可以实现这种行为 .

  只需定义第一个div的宽度，然后给第二个 flex-grow 值 1 ，这将允许它填充父级的剩余宽度 .

  .container{
      display: flex;
  }
  .fixed{
      width: 200px;
  }
  .flex-item{
      flex-grow: 1;
  }
  

  <div class="container">
    <div class="fixed"></div>
    <div class="flex-item"></div>
  </div>
  

  jsFiddle demo

  请注意，弹性框不向后兼容旧版浏览器，但它是定位现代浏览器的绝佳选择（另请参阅Caniuse和MDN） . 有关如何使用柔性盒的详尽综合指南，请参见CSS Tricks .

  回复于 2024-05-07T21:25:31+08:00
• 292

  我不是在寻找简单的东西，它会自动适应屏幕（就像我一样）我相信最直接的解决方案是使div在段落中表现为单词 . 尝试指定 display: inline-block

  <div style="display: inline-block">
     Content in column A
  </div>
  <div style="display: inline-block">
     Content in column B
  </div>
  

  您可能需要也可能不需要指定DIV的宽度

  回复于 2024-05-07T21:25:31+08:00
• 132

  您可以使用CSS网格来实现此目的，这是用于说明目的的长版本：

  div.container {
      display: grid;
      grid-template-columns: 220px 20px auto;
      grid-template-rows: auto;
  }
  
  div.left {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: row1-start
      grid-row-end: 3;
      background-color: Aqua;
  }
  
  div.right {
      grid-column-start: 3;
      grid-column-end: 4;
      grid-row-start: 1;
      grid-row-end; 1;
      background-color: Silver;
  }
  
  div.below {
      grid-column-start: 1;
      grid-column-end: 4;
      grid-row-start: 2;
      grid-row-end; 2;
  }
  

  <div class="container">
      <div class="left">Left</div>
      <div class="right">Right</div>
      <div class="below">Below</div>
  </div>
  

  或者使用float和margin的更传统的方法 .

  我在此示例中包含了一个背景颜色，以帮助显示事物的位置 - 以及如何处理浮动区域下方的内容 .

  不要将你的风格内嵌在现实生活中，将它们提取到样式表中 .

  div.left {
      width: 200px;
      float: left;
      background-color: Aqua;
  }
  
  div.right {
      margin-left: 220px;
      background-color: Silver;
  }
  
  div.clear {
      clear: both;
  }
  

  <div class="left"> Left </div>
      <div class="right"> Right </div>
      <div class="clear">Below</div>
  

  <div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
  <div style="margin-left: 220px; background-color: Silver;"> Right </div>
  <div style="clear: both;">Below</div>
  

  回复于 2024-05-07T21:25:31+08:00
• 2

  <div class="container" style="width: 100%;">
      <div class="sidebar" style="width: 200px; float: left;">
          Sidebar
      </div>
      <div class="content" style="margin-left: 202px;">
          content 
      </div>
  </div>
  

  这将是跨浏览器兼容的 . 如果您的内容比侧边栏长，那么如果没有剩余边距，您将遇到内容一直向左运行的问题 .

  回复于 2024-05-07T21:25:31+08:00
• 9

  如果你没有使用IE6，那么浮动第二个 <div> 并给它一个等于（或者可能略大于）第一个 <div> 固定宽度的边距 .

  HTML：

  <div id="main-wrapper">
      <div id="fixed-width"> lorem ipsum </div>
      <div id="rest-of-space"> dolor sit amet </div>
  </div>
  

  CSS：

  #main-wrapper {
      100%;
      background:red;
  }
  #fixed-width {
      width:100px;
      float:left
  }
  #rest-of-space {
      margin-left:101px;
          /* May have to increase depending on borders and margin of the fixd width div*/
      background:blue;
  }
  

  保证金考虑了'rest-of-space' <div> 可能包含比'fixed-width' <div> 更多内容的可能性 .

  Don 't give the fixed width one a background; if you need to visibly see these as different ' columns'然后使用Faux Columns技巧 .

  回复于 2024-05-07T21:25:31+08:00