如何正确地将这两个块彼此相邻放置？

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>