讓div填滿父母的其餘部分

我有一個沒有指定寬度的標題/容器（因此它和父母一樣長）。在裏面，我有兩個更小的div。現在，第一個應該只包含一個圖片（具有設定的大小），另一個應該像剩下的空間一樣大。我不能使用設置寬度，因爲我不知道標題的寬度。如何用純CSS做到這一點？讓div填滿父母的其餘部分

我想最終是一個圖片，然後一些文本右對齊頂部，然後一些文本與左邊的圖片的底部對齊。你知道有更好的方法來做到這一點嗎？

這裏有一個圖片，使其更容易理解：

Example

謝謝，亞歷山大

編輯1：

HTML：

<div class="header"> 
    <div class="header_left"> 
    <div class="pic"><img width="35px" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png" /></div> 
    </div> 
    <div class="header_right"> 
    <div class="time">18m ago</div> 
    <div class="name">Volkswagen</div> 
    </div> 
</div>

CSS：

.header { 
} 

.header_left { 
    display: inline-block; 
} 
    .pic { 
    margin: 5px; 
    } 

.header_right { 
    display: inline-block; 
} 
    .time { 
    margin: 5px; 
    float: right; 
    } 
    .name { 
    margin: 5px; 
    float:left; 
    }

現在有點亂，因爲我剛剛嘗試了很多東西，而這是最後一件事。

來源

2013-04-27 Aleksander

這將是一個很多與您的代碼更容易。它張貼，所以我們可以看到你嘗試過什麼，告訴你哪裏出了問題 – BackSlash 2013-04-27 21:50:10

感謝反饋，我現在已經添加了一些代碼（雖然它可能不會有很大的幫助，因爲我只是想知道一個辦法做到這一點。我的代碼可能是垃圾：P） – Aleksander 2013-04-27 22:27:34

，如果你顯示你的HTML時，它會更容易些。這是一個基於你的描述的例子。你可以看到在這個小提琴這裏工作 http://jsfiddle.net/Z68ds/18/

.header { 
    overflow:hidden; 
    padding: 4px; 
    background: #ddd; 
} 

.caption { 
    float: right; 
    font-size: 0.9em; 
} 

.avatar { 
    float: left; 
} 

.title { 
    margin: 14px 0 0 38px; 
} 

<div class="header"> 
    <div class="caption"> 
     texty text2 
    </div> 
    <img class="avatar" src="http://i.stack.imgur.com/5dv0i.jpg?s=32&g=1" /> 
    <div class="title">texty text1</div> 
</div>

來源

2013-04-27 21:56:49 antony

我需要以後能夠引用textY處的text1（通過使用ID），因此它需要在一個DIV（或段落或別的東西）。但是當我使用一個div，沒有任何多餘的標記，它推下下面的圖片。我如何解決這個問題？ – Aleksander 2013-04-27 22:25:55

我已經更新了標記。如果你知道圖像的高度和寬度，那麼這應該工作。如果您有不同高度的圖像/寬度，佈局會變得更復雜一些。 – antony 2013-04-27 22:46:40

謝謝，它現在的作品:) – Aleksander 2013-04-28 12:00:10

您必須在不想設置寬度的元素中使用overflow而不會將其浮動。

#left { 
    float: left; 
    width: 100px; 
} 

#right { 
    overflow: hidden; 
}

這將強制#right元素覆蓋其父項的其餘部分。不需要額外的標記。

來源

2013-04-27 21:51:23 pzin

這是你想才達到什麼？

<div id="header"> 
    <img id="logo" src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" /> 
    <p id="textRight">texty text2</p> 
    <p id="textLeft">texty text1</p> 
    <div class="clearer"></div> 
</div> 

/* CSS */ 

#logo { 
    float: left; 
} 
#textRight { 
    float: right; 
} 
#textLeft { 
    clear: right; 
    float: left; 
} 
.clearer { 
    clear: both; 
}

這裏是一個小提琴：

http://jsfiddle.net/T26cD/

來源

2013-04-27 21:53:55 Wipster

它幾乎工作，但問題是，「textY處text1」中沒有與圖片的底部，當圖片僅供35px高，字體是相當大的...任何對齊在不改變圖片尺寸或字體大小的情況下解決這個問題的方法？見琴：http://jsfiddle.net/T26cD/1/ – Aleksander 2013-04-27 22:20:20

讓div填滿父母的其餘部分

回答

相關問題