對齊圖像和文本內聯

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