Question

我正在拔头发，因为我无法理解这一点。我正在开发一个wiki。典型页面右侧有一个侧栏，宽度固定。此侧边栏的左侧是文本，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中的表格，它将在页面的最大宽度减去侧边栏的宽度。如果它不在侧边栏旁边，那么它就是页面的整个宽度。我想我只是希望其他所有内容都像文本一样 - 它会直接转到它右侧的任何内容（如果侧边栏不在那里，可以是侧边栏，如果侧边栏不在那里，可以是页面右侧）。

提前谢谢！：）

Answer 1

像这样写：

<强> 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/

除以页面宽度的100％，减去右侧固定div的宽度（但没有设置边距右）

1 个答案: