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：table-cell作为两者，给出一个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

要使用一些超级基本CSS将两个div放在一起，你可以将一个div向左浮动，一个向右浮动，这将使它们在彼此相邻的同一行上。然后你可以指定每个的宽度，基本上你需要从100％（屏幕的整个宽度）开始，并使一个部分和另一个部分，以便当你将它们加在一起时，它们加起来为100％。 / p>

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的宽度和排列应该在不同的屏幕上大小。你可以在你的项目中包含Bootstrap，然后像这样实现同样的效果

<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>

Bootstrap基于12列网格，12列=屏幕宽度的100％。这就是为什么我使用较小的左手div的宽度为4，而较大的右手的宽度为8。您可以根据需要调整这些宽度。希望这一切都有所帮助。

Answer 4

如果你想使用float，只使图像浮动

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何正确地将这两个块放在彼此旁边？

4 个答案: