Div的寬度為頁面寬度的100%,減去右邊固定的Div的寬度(但是沒有設置右邊框)

[英]Div at 100% of page width, minus the width of a fixed div on the right (but without setting a margin-right)


I am pulling my hair out because I just cannot figure this out. I am developing a wiki. A typical page has a sidebar to the right with a fixed width. To the left of this sidebar is text, div's, tables, etc. (the content of the page). Basically, I want everything to be at full width - that means if it's next to the sidebar, it should be the full width minus the length of the sidebar. If it's not next to the sidebar, it should be the full width of the page. Like this:

我在拔頭發,因為我就是搞不清楚。我正在開發一個維基。一個典型的頁面右邊有一個固定寬度的側邊欄。在側邊欄的左邊是文本、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            | |
| |___________________________| |
|_______________________________|

In the case of text, it all wraps around the sidebar perfectly. If I have a super long sentence, it goes all the way to the left of the sidebar, then breaks to a new line. If I have a super long paragraph, all of the text bumps up right next to the sidebar and also goes right underneath it.

就文本而言,它完美地圍繞着側邊欄。如果我有一個超長的句子,它會一直走到側邊欄的左邊,然后跳轉到一條新行。如果我有一個超長的段落,所有的文本都在側邊欄旁邊,也在它下面。

However, the problem I'm having is when I want to put a div to the left of the sidebar. When set to 100%, the div does not take into consideration the width of the sidebar and expands to the full width of the page, thus overlapping the sidebar. Normally I would just set the div to have a margin-right of the width of the sidebar. However, for my purposes, this isn't going to feasible because on different screen resolutions, the div might be lower on the page below the sidebar and thus there will be a blank gap to the right of the div (plus it would just be easier for coding purposes to figure this problem out so the page's div's know how wide they should be themselves). For example, in my text picture above, if the page were skinnier because it's on a lower screen resolution, the first box would probably be underneath the sidebar. With a margin-right of the sidebar, this would mean there would be a big gap to the right of the box and that it would not be the full width of the page.

然而,我現在遇到的問題是,當我想把一個div放到側邊欄的左邊時。當設置為100%時,div不考慮側邊欄的寬度,並擴展到頁面的全寬度,從而重疊側邊欄。通常,我只需將div設置為側邊欄寬度的右邊緣。為我的目的,然而,這不是可行的,因為在不同的屏幕分辨率,下面的div會降低頁面上的側邊欄,因此會有一個空白的差距右邊的div(加上它就是編碼的目的更容易解決這個問題,所以頁面的div的知道他們應該自己有多寬)。例如,在我上面的文本圖片中,如果頁面由於屏幕分辨率較低而變得更窄,那么第一個框很可能位於側邊欄的下方。使用側邊欄的右邊緣,這將意味着框的右邊會有一個很大的空隙,而且不會是頁面的全寬度。

This is the code I'm using.

這是我正在使用的代碼。

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

I'm hoping there's a way to just make it so that if something is next to the sidebar, such as a table within a div, it'll be at the max width of the page minus the width of the sidebar. If it's not next to the sidebar, it's the full width of the page. I guess I just want everything else to act like text - it'll go right up to whatever is to the right of it (either the sidebar if it's there or the right side of the page if the sidebar is not there).

我希望有一種方法可以使它在側邊欄旁邊,比如div中的表,它將位於頁面的最大寬度減去側邊欄的寬度。如果不是在側邊欄旁邊,那就是頁面的全寬。我想我只是想讓其他的一切都像文本一樣——它會一直到它右邊的地方(如果它在那里,它就會出現在側邊欄上;如果沒有側邊欄,它就會出現在頁面的右邊)。

Thank you in advance! :)

提前謝謝你!:)

1 个解决方案

#1


6  

Write like this:

這樣寫:

CSS

CSS

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

HTML

HTML

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

Check this http://jsfiddle.net/rq5WX/

檢查這個http://jsfiddle.net/rq5WX/


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2012/06/12/7299dc0bb69e6f4acb937a91c39f1b9a.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com