4

我正在拔头发，因为我无法弄清楚这一点。我正在开发一个维基。典型的页面右侧有一个固定宽度的侧边栏。此侧边栏的左侧是文本、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 中的表格，它将是页面的最大宽度减去侧边栏的宽度。如果它不在侧边栏旁边，则它是页面的整个宽度。我想我只是希望其他所有内容都像文本一样 - 它会一直上升到它右侧的任何内容（如果它存在则为侧边栏，如果侧边栏不存在则为页面右侧）。

先感谢您！:)

4

1 回答 1

6

像这样写：

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/

于 2012-06-12T08:10:59.743 回答