Html 2 列 div 布局：右列固定宽度，左列流体

Question

提问by MrG

My requirement is simple: 2 columns where the right one has a fixed size. Unfortunately I couldn't find a working solution, neither on stackoverflow nor in Google. Each solution described there fails if I implement in my own context. The current solution is:

我的要求很简单：2 列，其中正确的有固定大小。不幸的是，无论是在 stackoverflow 还是在 Google 中，我都找不到有效的解决方案。如果我在自己的上下文中实施，那里描述的每个解决方案都会失败。目前的解决办法是：

div.container {
    position: fixed;
    float: left;
    top: 100px;
    width: 100%;
    clear: both;
}

#content {
    margin-right: 265px;
}

#right {
    float: right;
    width: 225px;
    margin-left: -225px;
}

#right, #content {
    height: 1%; /* fixed for IE, although doesn't seem to work */
    padding: 20px;
}

<div class="container">
    <div id="content">
        fooburg content
    </div>
    <div id="right">
        test right
    </div>
</div>

I get the following with above code:

我得到以下代码：

|----------------------- -------|
| fooburg content  |            |
|-------------------------------|
|                  | test right | 
|----------------------- -------|

Please advise. Many thanks!

请指教。非常感谢！

Answer 1

回答by HymanJoe

Remove the float on the left column.

删除左列上的浮动。

At the HTML code, the right column needs to come before the left one.

在 HTML 代码中，右列需要在左列之前。

If the right has a float (and a width), and if the left column doesn't have a width and no float, it will be flexible :)

如果右边有一个浮动（和一个宽度），如果左边的列没有宽度也没有浮动，它会很灵活:)

Also apply an overflow: hiddenand some height (can be auto) to the outer div, so that it surrounds both inner divs.

还overflow: hidden对外部 div应用一个和一些高度（可以是自动的），以便它包围两个内部 div。

Finally, at the left column, add a width: autoand overflow: hidden, this makes the left column independent from the right one (for example, if you resized the browser window, and the right column touched the left one, without these properties, the left column would run arround the right one, with this properties it remains in its space).

最后，在左列添加一个width: autoand overflow: hidden，这使得左列独立于右列（例如，如果您调整浏览器窗口的大小，并且右列接触到左列，没有这些属性，左列将运行在右边的周围，具有此属性，它保留在其空间中）。

Example HTML:

示例 HTML：

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible width
    </div>
</div>

CSS:

CSS：

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}??

Example here: http://jsfiddle.net/HymanJoe/fxWg7/

这里的例子：http: //jsfiddle.net/HymanJoe/fxWg7/

Answer 2

回答by Adam

See http://www.alistapart.com/articles/negativemargins/, this is exactly what you need (example 4there).

请参阅http://www.alistapart.com/articles/negativemargins/，这正是您所需要的（那里的示例 4）。

<div id="container">
    <div id="content">
        <h1>content</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
        <p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
    </div>
</div>

<div id="sidebar">
    <h1>sidebar</h1>
    <ul>
        <li>link one</li>
        <li>link two</li>
    </ul>
</div>

#container {
    width: 100%;
    background: #f1f2ea url(background.gif) repeat-y right;
    float: left;
    margin-right: -200px;
}
#content {
    background: #f1f2ea;
    margin-right: 200px;
}
#sidebar {
    width: 200px;
    float: right;

Answer 3

回答by Loren

Best to avoid placing the right column before the left, simply use a negative right-margin.

最好避免将右列放在左列之前，只需使用负的右边距即可。

And be "responsive" by including an @media setting so the right column falls under the left on narrow screens.

并通过包含@media 设置来“响应”，以便在窄屏幕上右列位于左下方。

<div style="background: #f1f2ea;">
  <div id="container">
    <div id="content">
        <strong>Column 1 - content</strong>
    </div>
  </div>
  <div id="sidebar">
    <strong>Column 2 - sidebar</strong>
  </div>
<div style="clear:both"></div>

<style type="text/css">
#container {
    margin-right: -300px;
    float:left;
    width:100%;
}
#content {
    margin-right: 320px; /* 20px added for center margin */
}
#sidebar {
    width:300px;
    float:left
}
@media (max-width: 480px) {
    #container {
        margin-right:0px;
        margin-bottom:20px;
    }
    #content {
        margin-right:0px;
        width:100%;
    }
    #sidebar {
        clear:left;
    }
}
</style>

Answer 4

回答by Benj

Simplest and most flexible solutionso far it to use table display:

迄今为止最简单、最灵活的解决方案table display：

HTML, left div comes first, right div comes second ... we read and write left to right, so it won't make any sense to place the divs right to left

HTML，左 div 在前，右 div 在后……我们从左到右读写，所以从右到左放置 div 没有任何意义

<div class="container">
    <div class="left">
        left content flexible width
    </div>
    <div class="right">
        right content fixed width
    </div>
</div>

CSS:

CSS：

.container {
  display: table;
  width: 100%;
}

.left {
  display: table-cell;
  width: (whatever you want: 100%, 150px, auto)
}??

.right {
  display: table-cell;
  width: (whatever you want: 100%, 150px, auto)
}

Cases examples:

案例示例：

// One div is 150px fixed width ; the other takes the rest of the width
.left {width: 150px} .right {width: 100%}

// One div is auto to its inner width ; the other takes the rest of the width
.left {width: 100%} .right {width: auto}

Answer 5

回答by Illya Moskvin

I'd like to suggest a yet-unmentioned solution: use CSS3's calc()to mix %and pxunits. calc()has excellent supportnowadays, and it allows for fast construction of quite complex layouts.

我想建议一个尚未提及的解决方案：使用 CSS3calc()来混合%和px单位。现在calc()有很好的支持，它允许快速构建相当复杂的布局。

Here's a JSFiddlelink for the code below.

这是下面代码的JSFiddle链接。

HTML:

HTML：

<div class="sidebar">
  sidebar fixed width
</div>
<div class="content">
  content flexible width
</div>

CSS:

CSS：

.sidebar {
    width: 180px;
    float: right;
    background: green;
}

.content {
    width: calc(100% - 180px);
    background: orange;
}

And here's another JSFiddledemonstrating this concept applied to a more complex layout. I used SCSS here since its variables allow for flexible and self-descriptive code, but the layout can be easily re-created in pure CSS if having "hard-coded" values is not an issue.

这是另一个JSFiddle，演示了将这个概念应用于更复杂的布局。我在这里使用了 SCSS，因为它的变量允许灵活和自我描述的代码，但如果“硬编码”值不是问题，则可以轻松地在纯 CSS 中重新创建布局。

Answer 6

回答by Salman A

This is a generic, HTML source ordered solution where:

这是一个通用的 HTML 源代码排序解决方案，其中：

The first column in source order is fluid
The second column in source order is fixed
- This column can be floated left or right using CSS

源顺序中的第一列是流动的
源顺序中的第二列是固定的
- 此列可以使用 CSS 向左或向右浮动

Fixed/Second Column on Right

右侧固定/第二列

#wrapper {
  margin-right: 200px;
}
#content {
  float: left;
  width: 100%;
  background-color: powderblue;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: palevioletred;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

Fixed/Second Column on Left

左侧固定/第二列

#wrapper {
  margin-left: 200px;
}
#content {
  float: right;
  width: 100%;
  background-color: powderblue;
}
#sidebar {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: palevioletred;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

Alternate solution is to use display: table-cell; which results in equal height columns.

替代解决方案是使用display: table-cell；这导致等高的列。

Answer 7

回答by tigerstyle

Hey, What you can do is apply a fixed width to both the containers and then use another div class where clear:both, like

嘿，您可以做的是对两个容器应用固定宽度，然后使用另一个 div 类，其中 clear:both，例如

div#left {

width: 600px;
float: left;
}

div#right {

width: 240px;
float: right;

}

div.clear {

clear:both;

}

place a the clear div under left and right container.

在左右容器下放置一个清晰的 div。

Answer 8

回答by RiG SEO Service

I have simplified it : I have edited Hymanjoe's answer. The height auto etc not required I think.

我已经简化了：我已经编辑了 Hymanjoe 的答案。我认为不需要高度自动等。

CSS:

CSS：

#container {
position: relative;
margin:0 auto;
width: 1000px;
background: #C63;
padding: 10px;
}

#leftCol {
background: #e8f6fe;
width: auto;
}

#rightCol {
float:right;
width:30%;
background: #aafed6;
}

.box {
position:relative;
clear:both;
background:#F39;
 }
</style>

HTML:

HTML：

<div id="container">

  <div id="rightCol"> 
   <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
 </div>

 <div id="leftCol">

   <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.

Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英。菜豆。Lorem ipsum dolor 坐 amet，consectetuer adipiscing elit.Phasellus varius eleifend。

</div>

</div>

<div class="box">
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>

Html 2 列 div 布局：右列固定宽度，左列流体

提问by MrG

回答by HymanJoe

回答by Adam

回答by Loren

回答by Benj

回答by Illya Moskvin

回答by Salman A

回答by tigerstyle

回答by RiG SEO Service

相关推荐

最近更新

标签

Html 2 列 div 布局：右列固定宽度，左列流体

提问by MrG

回答by HymanJoe

回答by Adam

回答by Loren

回答by Benj

回答by Illya Moskvin

回答by Salman A

回答by tigerstyle

回答by RiG SEO Service

相关推荐

Html css中的字符串连接

获取加载的 UIWebView 的 HTML 源代码

Html helvetica 字体在 wkhtmltopdf 中不起作用

你如何在 iOS 的 HTML 表单字段中关闭自动大写？

相关推荐

最近更新

标签