兩個div的同一行，一個動態寬度，一個固定

我已下一個父div兩個div，父div有100％的寬度：兩個div的同一行，一個動態寬度，一個固定

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

的條件是：

我想要兩個div在同一行上。
正確的div可能存在也可能不存在。當它出現時，我希望它始終固定在右側。但是，左邊的div必須是有彈性的 - 它的寬度取決於它的內容。

我試過float：left和dispaly：inline-block，但都沒有解決方案似乎工作。

任何建議，將不勝感激。

來源

2011-05-19 bingjie2680

我與@ Sandeep的display: table-cell答案去，如果你不關心IE7。

否則，這裏有一個替代方案，但有一個缺點：「正確的」div必須在HTML中排在第一位。

參見：http://jsfiddle.net/thirtydot/qLTMf/
完全一樣，但與「右格」中刪除：http://jsfiddle.net/thirtydot/qLTMf/1/

#parent { 
    overflow: hidden; 
    border: 1px solid red 
} 
.right { 
    float: right; 
    width: 100px; 
    height: 100px; 
    background: #888; 
} 
.left { 
    overflow: hidden; 
    height: 100px; 
    background: #ccc 
} 
<div id="parent"> 
    <div class="right">right</div> 
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper porta sem, at ultrices ante interdum at. Donec condimentum euismod consequat. Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin at ante nec neque commodo bibendum. Cras bibendum egestas lacus, nec ullamcorper augue varius eget.</div> 
</div>

來源

2011-05-19 10:47:36 thirtydot

我知道這個技巧，這是偉大的http：///htmldog.com/也在他自己的網站上實現，但是我想根據@Yijie給出標記 – sandeep 2011-05-19 11:02:23

@sandeep：是的，我同意。如果你還沒有這樣做，我會發佈一個基於'display：table-cell'的答案。 – thirtydot 2011-05-19 11:05:24

@thriydot;你也配得+1 +1 – sandeep 2011-05-19 11:10:10

@Yijie;檢查鏈接，也許這就是你想要http://jsfiddle.net/sandeep/NCkL4/7/

編輯：

http://jsfiddle.net/sandeep/NCkL4/8/

來源

2011-05-19 10:11:29 sandeep

這不是海報想要的。如果您刪除了正確的div，它將留下空白區域，因爲您使用填充來保持內容的距離。 – DarthJDG 2011-05-19 10:31:36

當你刪除右分區時，它會留下空白區域... – bingjie2680 2011-05-19 10:32:38

@darthJDG＆Yijie Li檢查我的新jsfiddle也許這就是你想 – sandeep 2011-05-19 10:41:34

所以留格的風格取決於右div的存在。我想不出一個允許這種行爲的CSS選擇器。

因此，在我看來，你需要以編程方式在父div或左div上添加一個類服務器端（或在JS）來做到這一點。

<div id="parent twocols"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div>

或

<div id="parent"> 
    <div class="left"></div> 
</div>

所以，正確的風格永遠是：

.right { 
    float: right; 
    width: 200px; /* or whatever value you need */ 
    /* margin and padding at your discretion */ 
}

和左風格是：

.parent.twocols .left { 
    margin-right: 200px; /* according to right div width + margin + padding*/ 
}

來源

2011-05-19 10:12:46

當您使用。左{保證金右：爲200px} 如果有合適的股利不當下。它會留下空白。不是嗎？ – bingjie2680 2011-05-19 10:25:50

當右列存在時，我沒有使用'.left {margin-right：200px}'，而是'.parent.twocols .left {margin-right：200px}'只包含這個頁邊距， 'addnal class – 2011-05-19 12:07:09

-1

我想這是你想要的：

<html> 
<head> 
<style type="text/css"> 
#parent 
{width:100%; 
height:100%; 
border:1px solid red; 
} 
.left 
{ 
float:left; 
width:40%; 
height:auto; 
border:1px solid black; 
} 
.right 
{ 
    float:left; 

width:59%; 
height:auto; 
border:1px solid black; 
} 
</style> 
</head> 
<body> 
<div id="parent"> 
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
    <div class="right">This is the right side content</div> 
</div> 
</body> 
</html>

以下是演示：http://jsfiddle.net/anish/aFBmN/

來源

2011-05-19 10:19:14 Anish

這不是海報想要的。右側不是固定的大小，如果你刪除了正確的div，它會留下空白區域。 – DarthJDG 2011-05-19 10:30:48

謝謝，但同樣的問題爲3個答案,,,當你刪除正確的div，它留下空白空間....我想我會用腳本，而不是... – bingjie2680 2011-05-19 10:31:01

HTML：

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

（div.right需要是前DIV。在HTML標記左）

CSS：

.right { 
float:right; 
width:200px; 
}

來源

2011-05-19 10:51:35

這是一個有趣的想法。但它不起作用，當左邊的div佔據整條線時，它就會進入正確的div。 – bingjie2680 2011-05-19 10:58:20

我已經使用空白的成功：NOWRAP;在外部容器上顯示：inline-block;在內部容器上，然後（在我的情況下，因爲我想第二個單詞包裝）空白：正常;在內部的。

來源

2014-03-03 11:03:09

兩個div的同一行，一個動態寬度，一個固定

回答

相關問題