最大寬度和浮動divs

我所擁有的是3 divs，左邊1是中心，右邊是1 我需要的是3列 - 左邊總是有，中心也是，但它的寬度應該是自適應的如果權利是否存在最大寬度和浮動divs

<html> 
<head> 
</head> 
<body> 
    <div style="width:460px; padding:0px 20px;"> 
     <div style="float:left; background: red; width:100px;"> 
      red 
     </div> 
     <div style="float:left; background: yellow; max-width:400px"> 
      yellow 
     </div> 
     <div style="float:left; background: green; width:100px;"> 
      green 
     </div> 
    </div> 
</body> 
</html>

我在做什麼錯了？

來源

2012-03-07 Y.G.J

你意識到內容「left left ...」的div實際上是在右邊嗎？（[JS小提琴]（http://jsfiddle.net/davidThomas/VZ7aL/））。 – 2012-03-07 19:36:48

我知道 - 我只是做了一個快速的例子，因爲我想一勞永逸地學習這件事...你可以回答我，並用背景色代替邊框 – 2012-03-07 19:38:07

我的觀點實際上除了'......中......列......我不知道另外兩個人的意圖是在哪一邊？ HTML是否必須保持原樣，是否可以改編？ – 2012-03-07 19:39:41

爲了避免使用JavaScript解決方案以及僅使用CSS和HTML，我所能想到的最好的方法是對列使用類名，並重新排序您的HTML以使最右邊的列是先在HTML：

<div class="wrap" style="width:500px"> 
    <div class="col right">Right Column</div> 
    <div class="col left">Left column</div> 
    <div class="col middle">Middle column</div> 
</div> 
<div class="wrap" style="width:500px"> 
    <div class="col left">Left column 2</div> 
    <div class="col middle">Middle column 2</div> 
</div>

隨着CSS相鄰同胞選擇器，firstSibling + secondSibling，這可以用於修改中間列的寬度：

.wrap { 
    width: 500px; 
    margin: 1em auto; 
    overflow: hidden; 
} 

.left, 
.right { 
    width: 100px; 
    background-color: #ffa; 
} 

.middle { 
    width: 400px; 
    background-color: #f90; 
} 

.left, 
.middle { 
    float: left; 
} 

.right { 
    float: right; 
} 

div.right + div.left + div.middle { 
    width: 300px; 
}

JS Fiddle demo。

如果浮動.middle柱右，而不是左如前面的例子中，那麼就可以簡化相鄰同胞選擇器，和HTML是，有效地，直觀地反轉（也就是稍微容易明白/與工作比上面的例子，其中兩列來先，以相反的順序，然後中間列來在端部），得到：

<div class="wrap" style="width:500px"> 
    <div class="col right">Right Column</div> 
    <div class="col middle">Middle column</div> 
    <div class="col left">Left column</div> 
</div> 
<div class="wrap" style="width:500px"> 
    <div class="col left">Left column 2</div> 
    <div class="col middle">Middle column 2</div> 
</div>

而CSS：

.wrap { 
    width: 500px; 
    margin: 1em auto; 
    overflow: hidden; 
} 

.left, 
.right { 
    width: 100px; 
    background-color: #ffa; 
} 

.middle { 
    width: 400px; 
    background-color: #f90; 
} 

.left { 
    float: left; 
} 

.right, 
.middle { 
    float: right; 
} 

div.right + div.middle { 
    width: 300px; 
}

JS Fiddle demo。

參考文獻：

Adjacent sibling selector, at the W3.org。

來源

2012-03-07 19:53:25

我最終這樣做 - 謝謝你的鄰居兄弟姐妹 - 我從來沒有用過它 - 它的工作就像一個魅力;-) – 2012-03-07 20:32:57

你非常歡迎;我很高興得到了幫助！ =） – 2012-03-07 20:37:06

寬度包含邊框，您必須考慮這一點。如果稍微減小中心元素的寬度，右側將不會換行。

但是我不會在代碼中看到任何會處理中心寬度爲「自適應」的東西。

來源

2012-03-07 19:36:28

我知道 - 我只是做了一個快速的例子，因爲我想一勞永逸地學習這件事...你可以回答我，用背景色代替邊框 – 2012-03-07 19:38:25

那麼什麼是實際問題和實際的代碼是什麼？它是否是「適應性」部分？如果是這樣，您嘗試使其具有適應性？ – 2012-03-07 19:40:01

不確定你想要做什麼，但這可能有效。如果你可以詳細說明它應該做什麼，它會有所幫助，但這似乎是你想要的。如果右列設置爲顯示：無，那麼中心仍然完成。

<html> 
<head> 
</head> 
<body> 
<div style="width:480px; padding:0px 20px;"> 
    <div style="float:left; background: red; width:100px;"> 
     red 
    </div> 
    <div style="float:right; background: green; width:100px;> 
     green 
    </div> 
    <div style="background: yellow; width:100%;"> 
     yellow 
    </div> 
</div> 
</body> 
</html>

來源

2012-03-07 20:01:30 CDStMichael

最大寬度和浮動divs

回答

相關問題