css - 如何固定两列 CSS 布局中的列宽?

标签 css layout

我在将多个 div 用作两列时遇到问题。在下面的代码中,我希望 container(或 content)和 right 充当两列。

  • 两者都需要边框(非图像),其中两者之间的边框应与外边框的视觉宽度相同。
  • topbottom 两列的高度必须相同
  • right 应该是固定大小

这甚至可以在不更改 HTML 的情况下实现吗?

采用以下 HTML:

<body>
  <div id="top"></div>

  <div id="container">
    <div id="content">
    </div>
  </div>

  <div id="right">
  </div>

  <div id="bottom"></div>
</body>

最佳答案

这会做你想做的事。

标记

<body>
    <div id="top">top</div>
    <div id="container">
        <div id="content">
            content
         </div>
         <div id="right">
            right
         </div>
         <br style="clear:both" />
    </div>
    <div id="bottom">bottom</div>
</body>

CSS

#container {border:1px solid blue;}
#content, #right {float:left;}
#content {width:400px; border-right:1px solid blue;}

关于css - 如何固定两列 CSS 布局中的列宽?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4528817/

相关文章:

在位置绝对后设置左属性时,CSS 下拉菜单中断

javascript - 如何为同一页面上的多个 div 制作 jQuery slidetoggle 效果?

java - 如何让ListView定位到某个元素下?

r - 垂直对齐 ggplot2 绘图

windows - 是否有一种简单的方法可以强制Windows使用固定的DPI值而不是当前DPI设置来计算文本范围?

javascript - meteor 动画

html - 如何为图像添加混合模式?

android - 在不使用位图的情况下防止 LayeredList 中的形状缩放

html - 当存在 <br> 时,如何文本对齐 div 的最后一行?

android - LinearLayout 底部的 TextView