自動展開div的寬度

看看這個小提琴，我發現，並調整結果窗口：http://jsfiddle.net/qPHgR/286/自動展開div的寬度

下面是從小提琴的CSS：

.left { 
    float: left; 
} 
.right { 
    background-color: #DDD; 
    overflow: hidden; 
}

我想達到同樣的事情，但我希望正確的div有一個固定的寬度（300像素）和左側div展開/收縮窗口的大小調整。我無法弄清楚如何修改它，而不改變代碼中左右div的HTML順序。我已經與浮游物和其他attirbutes實驗，但不能使它的工作。

感謝您的幫助！

來源

2013-01-04 lawls

你能發表你自己的代碼嗎？ – jackcogdill

@yentup我曾嘗試過，但無法弄清楚如何解決它。我沒有任何代碼。 – lawls

你是如何在沒有代碼的情況下進行實驗的？ – jackcogdill

Updated jsFiddle

浮子是用於保持兩個元件彼此相鄰重要。我在左邊DIV（右邊300像素DIV，右邊10像素，白色邊框）右邊添加了310像素的邊距。然後我使用負數margin-left將右邊的DIV拉到最大。

我還在DIV.container上加了overflow: hidden;來說明一個簡單的浮子遏制解決方案。如果不必要，可以將其刪除，但是您可能會發現它會使佈局樣式的其餘部分更加容易。

來源

2013-01-04 08:42:51 thirdender

如何： http://jsfiddle.net/7DKX8/2

.left { 
    float: left; 
    background-color: #DDD; } 

.right { 

    width: 300px; 
    overflow: hidden; }

來源

2013-01-04 00:47:29 eberswine

我想讓.left和.right彼此相鄰。包裝寬度應該不重要。 – lawls

好的，試試這個http://jsfiddle.net/7DKX8/2/ – eberswine

這算哪門子你想要什麼呢？ http://jsfiddle.net/3ZUas/

文本干擾，但這是你要去的嗎？

主要的是float: right;

來源

2013-01-04 00:59:48 jackcogdill

.container { 
    position: relative; 
} 
.left { 
    background-color: #DDD; 
    margin-right: 300px; 
} 
.right { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 300px; 
}

來源

2013-01-04 01:00:18 scronide

'position：absolute;'從文檔流中刪除右邊的'DIV'，如果右邊的文本長於在左邊的文本（它將出現在文檔下方的任何其他元素上）。 – thirdender

檢查：

HTML：

<div class="container"> 
    <div class="left"> 
     some text goes here which is just here to change 
    </div>  
    <div class="right"> 
     some longer bunch of text to go here, it should stick to the right some longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the right 
    </div> 
</div>

CSS：

.left { 
    float: left; 
margin-right: 300px; 
    border: 1px solid #000; 
} 
.right { 
position: absolute; 
    right: 0; 
    width: 300px; 
    background-color: #DDD; 
    overflow: hidden; 

}

希望這對你的作品...！

來源

2013-01-04 07:53:47 Harshad

自動展開div的寬度

回答

相關問題