Question

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

＆＃13;

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

＆＃13;

Answer 1

或者使用flexbox：

＆＃13;

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

＆＃13;

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

＆＃13;

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

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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属性对齐，我只给您一些示例。

为了实现你的目标，你可以使用浮点数，或显示内联块或表格单元格（不是任何人都可以使用，但很有用），你可以使用太多的弹性箱，但它是另一个答案，所以我没有＆＃39 ; t在这里添加。

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

jsFiddle here

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

对齐图像和文本内联

6 个答案: