我正在拔头发,因为我无法弄清楚这一点。我正在开发一个维基。典型的页面右侧有一个固定宽度的侧边栏。此侧边栏的左侧是文本、div、表格等(页面的内容)。基本上,我希望所有东西都是全宽的——这意味着如果它在侧边栏旁边,它应该是全宽减去侧边栏的长度。如果它不在侧边栏旁边,则它应该是页面的整个宽度。像这样:

 _______________________________
|                          ___  |
| text text text text te- |   | |
| xt text text text text. | S | |
| ______________________  | B | |
| |                     | |   | |
| |        table        | |___| |
| |          or         |       |
| |         div         |       |
| |_____________________|       |
|                               |
| more text text text text tex- |
| t text text text text text t- |
| ext text text text text text  |
| ____________________________  |
| |        another table      | |
| |             or            | |
| |            div            | |
| |___________________________| |
|_______________________________|

在文本的情况下,它完全环绕侧边栏。如果我有一个超长的句子,它会一直走到侧边栏的左侧,然后换行。如果我有一个超长的段落,所有的文本都会在侧边栏旁边出现,并且也在它的正下方。

但是,我遇到的问题是当我想在侧边栏左侧放置一个 div 时。当设置为 100% 时,div 不会考虑侧边栏的宽度,而是扩展到页面的整个宽度,从而与侧边栏重叠。通常我只会将 div 设置为边栏宽度的边距右侧。但是,就我的目的而言,这是不可行的,因为在不同的屏幕分辨率下,侧栏下方页面上的 div 可能较低,因此 div 右侧会有一个空白间隙(加上它只会是出于编码目的更容易解决这个问题,因此页面的 div 知道它们自己应该有多宽)。例如,在我上面的文字图片中,如果页面因屏幕分辨率较低而变得更薄,则第一个框可能位于侧边栏下方。侧边栏的边距右侧,这意味着框的右侧会有一个很大的间隙,并且它不会是页面的整个宽度。

这是我正在使用的代码。
<html>
<head>
<style type="text/css">#sidebar {
float: right;
width: 250px;
height: 200px;
border: 1px solid red;
}

#la {
border: 1px solid green;
width: 100%;
}
</style>
</head>
<body>

<div id="content">

    <div id="sidebar">Sidebar with fixed width</div>

    <p>The sun is a star.</p>
    <p>It's yellow.</p>
    <p>It's very hot.</p>

    <div id="la">This div is next to the sidebar and should bump up right next to its left side, as in, 100% of the page minus the width of the sidebar. It should not overlap the sidebar. This is not something that can just be done automatically with margin-right using the width of the sidebar because it might not actually be next to the sidebar on certain screen resolutions.</div>

    <p>The sun is a star.</p>
    <p>It's yellow.</p>
    <p>It's very hot.</p>

    <div id="la">This div is NOT next to the sidebar on most screen resolutions - it is under it where there is nothing to the right of it, so it should be the full width of the page.</div>


</div>

</body>
</html>

我希望有一种方法可以做到这样,如果侧边栏旁边有东西,例如 div 中的表格,它将位于页面的最大宽度减去侧边栏的宽度。如果它不在侧边栏旁边,则它是页面的整个宽度。我想我只是希望其他所有内容都像文本一样 - 它会直接到达它右侧的任何内容(如果侧边栏存在,则为侧边栏,如果侧边栏不存在则为页面右侧)。

先感谢您! :)

最佳答案

像这样写:

CSS

.right{
    float:right;
    width:60px;
    height:60px;
    background:green;
}
.left{
    overflow:hidden;
    border:2px solid yellow;
    background:red;
    height:60px;
}

HTML
<div class="right">right</div>
<div class="left">left</div>

检查这个 http://jsfiddle.net/rq5WX/

关于css - div 为页面宽度的 100%,减去右侧固定 div 的宽度(但不设置 margin-right),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10992500/

10-11 22:51
查看更多