2

这是一个非常简单的问题……乍一看。并且在第二个不是那么简单。：-/

有两个 div：#content 和 #sidebar（按此顺序！），它们包含在 div #main 中。#content div 可能有很长的表格或字符串，并且不能裁剪它们或增加自身的宽度，因此不允许溢出：隐藏和任何类型的流。#sidebar div 可能高于#content。#main div的高度必须是内部最高div的高度，所以“position: absolute; top: 0;” 因为#sidebar 不是解决方案。

问题：是否可以在#content div 的左侧设置一个#sidebar div，同时不对#content 使用任何类型的浮动并将所有div 完全保留在#main 内？

我在这里做了一个说明：http: //jsfiddle.net/dZLmu/

HTML

<div id="main">
    <div id="content">
        <p>It's a content area. It can contain a very long
            tables or strings which must not be cropped by
            overflow: hidden and must no extend a width of
            div itself. Something like that:</p>
        <p>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</p>
    </div>
    <div id="sidebar">
        <p>It's a sidebar.</p>
        <p>It can be higher then content area.</p>
        <p>Menu item #.</p>
        <p>Menu item #.</p>
        <p>Menu item #.</p>
        <p>Menu item #.</p>
        <p>Menu item #.</p>
        <p>Menu item #.</p>
    </div>
    <div id="clearfix"></div>
</div>

CSS

#main {
    background-color: silver;
    margin: 0 auto;
    widht: 500px;
    #position: relative;
}

#content {
    background-color: green;
    margin-left: 100px;
}

#sidebar {
    background-color: red;
    float: left;
    width: 100px;
    #position: absolute;
    #top: 0;
}

#clearfix {
    clear: both;
}
4

4 回答 4

1

像这样

演示

css

#main {
    background-color: silver;
    margin: 0 auto;
    display:table;
}
#content {
    background-color: green;  
    display:table-cell;
    word-break:break-all;

}

#sidebar {
    background-color: red; 
    width: 100px;  
   display:table-cell;

}

#clearfix {
    clear: both;
}

演示1

于 2013-09-20T12:42:01.913 回答
1

可能最简单的事情就是对#sidebar和#content元素应用特定的宽度，可以是百分比或像素宽度（如果你给包装器一个设定的宽度）。如果不能为 指定宽度#content，但想使用浮点数，可以使用 calc()。

小提琴

#content {
    float:right;
    width:calc(100% - 100px);
}

您只需减去#sidebar元素的宽度。但是，这与 IE8 不兼容。检查caniuse.com

根据可能适合实际用例的情况，这只是作为其他答案的替代方案

于 2013-09-20T12:46:44.310 回答
1

一个可能的解决方案：

#content {
    background-color: green;
    display: inline-block;
    max-width: 100%;
    border-left: 100px solid transparent;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#sidebar {
    background-color: red;
    float: left;
    width: 100px;
    margin-right: -100%;
    position: relative; 
}

这里会发生什么？首先，设置display:inline-block为#content将格式上下文#content从块更改为内联（容器变成单行文本，其中一个word包含整个内容块的大块）。然后，我们限制它的外部高度并添加一个透明边框来模拟边距并保持浮动列的位置。最后，我们使浮动 div 不处于水平位置（通过设置较大的负边距）并通过设置相对位置来更改其有效 z-index。

但是在源代码中交换两个 div 会不会更容易，所以侧边栏先出现？

于 2013-09-20T12:54:14.763 回答
0

不使用浮动时的常用方法是使用display: inline-block: http://www.jsfiddle.net/zygnz/1/

CSS 代码

.container div {
  display: inline-block;
}

HTML 代码

<div class="container">
<div id="content">
        <p>It's a content area. It can contain a very long
            tables or strings which must not be cropped by
            overflow: hidden and must no extend a width of
            div itself. Something like that:</p>
        <p>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</p>
    </div>
    <div id="sidebar">
        <p>It's a sidebar.</p>
        <p>It can be higher then content area.</p>
        <p>Menu item #.</p>
        <p>Menu item #.</p>
        <p>Menu item #.</p>
        <p>Menu item #.</p>
        <p>Menu item #.</p>
        <p>Menu item #.</p>
    </div>
</div>

但是请注意它的限制：在第一个块之后还有一个额外的空间 - 这是因为这两个块现在本质上是内联元素，如 a 和 em，所以两个块之间的空格。这可能会破坏您的布局和/或看起来不好看，并且为了这项工作，我不希望删除字符之间的所有空格。

在大多数情况下，浮点数也更灵活。

将display 属性设置为 table-cell也可以 display:table-cell;

希望这可以帮助

于 2013-09-20T12:42:42.363 回答