对齐图像和文本内联

Question

我试图简单地将图像与一些文本内联，以便文本和图像彼此相邻。 我正在使用display:inline; 但它似乎没有工作。 这是我的代码：

 <div class="design-image" style="display:inline;"> <img src="https://s29.postimg.org/taqtdfe7r/image1.png"> </div> <div class="programs" style="display:inline;"> <p>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p> </div> 

Answer 1

或者使用flexbox：

 img { width: 300px; height: auto; } p { margin:0; } .fb { display: flex; } .programs, .design-image { padding: 1em; } 

 <div class='fb'> <div class="design-image"> <img src="https://s29.postimg.org/taqtdfe7r/image1.png"> </div> <div class="programs"> <p>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p> </div> </div> 

Answer 2

要获得所需的效果，您应该使用float属性。 这些更改了元素添加到浏览器窗口的方式。 以下是他们可以为您做的一个示例：

 div { display: inline; } #pic { float: left; /* setting these so you know where the image would be */ width: 200px; height: 200px; background-color: red; margin-right: 50px; } #blah { float: left; width: 100px; } 

 <div id="pic"> Image would go here </div> <div id="blah"> <p>This is a short description referencing the image in question.</p> </div> 

Answer 3

嗨首先在img标签之前取一个div并给他宽度并向右浮动。 看到代码

<div>
            <p> aking the approach of truly designing programs from ground up, Northman Underwrites each individual
                to reflect the unique exposure of an extraordinary life.
            <div style="width:300px;float:right; padding:10px;"><img src="insert your image path"></div></p>
        </div>

Answer 4

尝试这个：

 .design-image { float: left; width: 50%; /*/ Or other Value /*/ } img { width: 100%; } 

  <div class="design-image""> <img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg"> </div> <div class="programs"> <p>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p> </div> 

Answer 5

您想要做的是使用float并为div提供宽度以及为图像和段落标记设置样式。 下面的代码可以帮助您实现您想要的目标

 <div class="design-image" style="width: 50%; float: left;"> <img style="width: 100%;" src="https://s29.postimg.org/taqtdfe7r/image1.png"> </div> <div class="programs" style="width: 50%; float: left;"> <p style="padding: 0 20px; margin:0;">Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p> </div> 

Answer 6

您可以使用不同的CSS属性对齐这些元素，我只给您一些示例。

为了实现你的目标，你可以使用浮点数，或显示内联块或表格单元格（不是任何人使用，但很高兴知道），你也可以使用flexbox，但是它在另一个答案中，所以我没有在这里添加它。

请记住，“div”是块元素，因此在大多数情况下使用内联块比使用内联更明智。 内联块将为您提供内联属性的优势，但将保持使用垂直边距/填充（顶部，底部）的容量。

jsFiddle在这里

<div class="method method-float">
<div class="design-image">
      <img src="https://s29.postimg.org/taqtdfe7r/image1.png">
    </div>
    <div class="programs">
      <p>Method float <br>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p>
    </div>
</div>


<div class="method method-inline-block">
<div class="design-image">
      <img src="https://s29.postimg.org/taqtdfe7r/image1.png">
    </div>
    <div class="programs">
      <p>Method inline-block <br>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p>
    </div>
</div>


<div class="method method-table-cell">
<div class="design-image">
      <img src="https://s29.postimg.org/taqtdfe7r/image1.png">
    </div>
    <div class="programs">
      <p>Method display table cell (not used, but interesting to know technique) <br>Taking the approach of truly designing programs from ground up, Northman Underwrites each individual to reflect the unique exposure of an extraordinary life. </p>
    </div>
</div>

CSS

img {
  width: 100%;
  height: auto;
}

.method-float {
  overflow: hidden;
}

.method-float .design-image {
  float: left;
  width: 50%;
}

.method-float .programs {
  float: left;
  width: 50%;
}

.method-inline-block {
  font-size: 0;
}

.method-inline-block .design-image {
  display: inline-block;
  width: 50%;
  vertical-align: top;

}

.method-inline-block .programs {
  display: inline-block;
  width: 50%;
  vertical-align: top;
  font-size: 16px;
}


.method-table-cell .design-image {
  display: table-cell;
  width: 1%;
  vertical-align: top;
}
.method-table-cell .programs {
  display: table-cell;
  width: 1%; 
  vertical-align: top;
}