将图像和文本对齐行内

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>

- user1813228

---

第二个<div>中的<p>仍然具有{display:block}。你可能正在寻找类似于float的东西。 - Mr Lister

这正是为什么引入了 float 的原因 :) - Rahul Jain

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>

- Gerard

Answer 2

首先，在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>

- Anil Pondric

---

谢谢，我已经在jsfiddle.net上发布了代码，你现在可以查看。 - Anil Pondric

Answer 3

你可以使用不同的CSS属性来对齐这些元素，我只是给你展示了一些例子。

要实现你的目标，你可以使用float，或者display inline-block或table-cell（没有人使用，但知道也好），你还可以使用flexbox，但它在另一个答案中，所以我没有在这里添加它。

记住，“divs”是块级元素，所以在大多数情况下，最明智的做法是使用inline-block而不仅仅是inline。Inline-block将为您提供inline属性的优势，但仍然可以使用垂直margin/padding（上，下）。

在这里查看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;
}

- Ricardo Castañeda

Answer 4

为了获得所需的效果，您应该使用 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>

- JordanOcokoljic

---

感谢您的帮助@sillyhairboy，您的答案有效，但是如果在#blah div内有h1元素和p元素，这仍然有效吗？ - user1813228

@shortcut 是的，它肯定会。 - JordanOcokoljic

Answer 5

试一试：

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

- Ehsan

Answer 6

你想要做的可以使用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>

- Ndroid21