如何正確地將這兩個塊彼此相鄰放置？

Question

我想嘗試實現的東西這樣的形象：

到目前爲止，我的嘗試是，我對左邊的列（包含圖像）一個div，並在右列一個div包含標題和該段的東西。它們都顯示爲塊，並向左浮動。由於圖像的尺寸是這樣的，因此左欄固定爲96px。正確的div是我眼睛的百分比寬度（65％工作正常）。

但是，我不認爲這是正確的方式來解決這個問題，而不會在稍後搞砸。我正確地處理這個問題嗎？做這種事情的正確方法是什麼？

Answer 1

這就是爲什麼Flexbox，就被髮明。許多許多例子都存在，對於這個問題，即使在SO上也是如此。

非常非常簡單的CSS：

.container { 
    display: flex; 
} 
.container .image { 
    flex: 0 0 96px; 
} 

演示：http://jsfiddle.net/rudiedirkx/vmukbe9u/

Flexbox的複雜十歲上下排序的，但非常值得。

Syntax explanation here.

Answer 2

如果你想要的是完全一樣的附加的圖像顯示，然後使用display：針對表細胞，給一個100％的百分比寬度，並且在像素的其他固定寬度： CSS：

#parent 
    { 
    display:table; 
} 
#left-div 
    { 
     display:table-cell; 
     width:96px; 
     height:96px; 
    } 
#right-div 
    { 
     width:100%; 
     display:table-cell; 
     height: auto; 
    } 

HTML：

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

Answer 3

要定位兩個div的彼此相鄰的一些超級基本的CSS，你可以浮動一個DIV到左邊，一個在右邊，這將讓他們在同一行彼此相鄰。然後你可以指定每一個的寬度，基本上你需要以100％（屏幕的整個寬度）開始，並使一個部分和另一個部分，以便當你將它們加在一起時，它們加起來爲100％。

HTML -

<div class="left">This is the div on the left</div> 
<div class="right">This is the div on the right</div> 

CSS -

.left{ 
    float:left; 
    width:30%; 
} 

.right{ 
    float:right; 
    width:70%; 
} 

然後使其響應你可以做一個媒體查詢（基本上只是設置特定樣式的特定屏幕寬度），其僅影響屏幕高達幷包括1024像素寬（平板大小）。我只是隨便選擇1024個像素，可以製作更具體的像素，或者不將它們全部包含在一起，完全取決於您。我已經包含這個媒體查詢只是刪除了浮動使div的將在其他的頂部佈置成一個，然後由它們的寬度爲100％，所以他們都佔據屏幕

@media(max-width:1024px){ 
    .left{ 
     float:none; 
     width:100%; 
    } 

    .right{ 
     float:none; 
     width:100%; 
    } 
} 

的整個寬度這樣的東西也可以很容易地使用像Bootstrap這樣的響應式框架來實現，Bootstrap會給你div的特定類，這些類指定div和排列的寬度應該在不同的屏幕尺寸上。您可以在您的項目包括引導進而達到這樣

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">this div is on the left on big screens</div> 
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">this div is on the right on big screens</div> 
</div> 

引導這同樣影響是基於12柱網，12列= 100屏幕寬度的百分比。這就是爲什麼我使用4的寬度爲較小的左手格，8的寬度爲較大的右手。您可以根據需要調整這些寬度。希望這一切都有幫助。

如果你想使用float

Answer 4

，僅使圖像浮

body, 
 
img, 
 
.box { 
 
    border: solid; 
 
    margin: 1em; 
 
} 
 
img { 
 
    float: left; 
 
} 
 
.box { 
 
    overflow: hidden; 
 
}

<img src='http://lorempixel.com/150/150' /> 
 
<div class="box"> 
 
    <h1>HTML Ipsum Presents</h1> 
 

 
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris 
 
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis 
 
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> 
 

 
    <h2>Header Level 2</h2> 
 

 
    <ol> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
    </ol> 
 

 
    <blockquote> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis 
 
     elit sit amet quam. Vivamus pretium ornare est.</p> 
 
    </blockquote> 
 
</div>