将文本和图像并排排列并排列在顶部

我试图让图像和文本与右侧的图像并排放置在一起，左侧的文本与要排列的文本顶部但它一直在底部将文本和图像并排排列并排列在顶部

对齐，这是我的代码

box{ 
 
display: inline-block; 
 
    width:auto; 
 
    height:auto; 
 
    margin: 10px; 
 
}

<div class="box"> 
 
     <p> 
 
      <img class="map" src="map.png" alt="Home delivery area" /> 
 

 
      </p> 
 

 
    </div> 
 

 
    <div class="box"> 
 
    Text text Text textText textText textText textText textText text <br /> 
 
    Text textText textText textText textText textText textText textText text.<br> 
 
    Text textText textText textText textText textText textText textText text<br /> 
 
    Text textText textText textText text. <br /> 
 
    <br /> 
 
    <br /> 
 
    Text textText textText textText textText textText textText textText text 
 
    <br /> 
 
    Text textText textText textText textText textText textText textText text <br /> 
 
    Text textText textText textText textText text 
 

 
    </p> 
 
     </div>

任何建议，我在做什么错

来源

2017-06-19 John G

我不能在CSS选择使用浮动 –

你还没有申请点（。）为箱体类使用.box的而不是第一个框 –

文本仍然对齐到图像的底部 –

地方的文本，然后再像这样

的CSS

.box{ 
display: inline-block; 
width:auto; 
height:auto; 
margin: 10px; 

}

的HTML

<div class="box"> 
Text text Text textText textText textText textText textText text <br /> 
Text textText textText textText textText textText textText textText text.<br> 
Text textText textText textText textText textText textText textText text<br /> 
Text textText textText textText text. <br /> 
<br /> 
<br /> 
Text textText textText textText textText textText textText textText text 
<br /> 
Text textText textText textText textText textText textText textText text <br /> 
Text textText textText textText textText text 

</p> 
    </div> 



    <div class="box"> 
    <p> 
     <img class="map" src="map.png" alt="Home delivery area" /> 

     </p> 

</div>

来源

2017-06-19 15:41:21

现在照片对齐文本的底部 –

为什么你不能使用浮动它的工作 –

1。它的任务为uni –

使用flexbox和改变方向行反转。您可以将所有内容放入一个元素类中。

.box{ 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    justify-content: space-around; 
 
}

<div class="box"> 
 
    <img class="map" src="https://placehold.it/200x200" alt="Home delivery area" /> 
 

 
    Text text Text textText textText textText textText textText text <br /> 
 
    Text textText textText textText textText textText textText textText text.<br> 
 
    Text textText textText textText textText textText textText textText text<br /> 
 
    Text textText textText textText text. <br /> 
 
    <br /> 
 
    <br /> 
 
    Text textText textText textText textText textText textText textText text 
 
    <br /> 
 
    Text textText textText textText textText textText textText textText text <br /> 
 
    Text textText textText textText textText text 
 

 

 
    </div>

JSFiddle

来源

2017-06-19 15:44:12

图片和文字，但至少现在并排 –

我知道你说你不想使用浮动，但它可能会改变有用。特别是如果你把p和IMG在同一.box的

.box img{ 
 
    float:right; 
 
    margin-left:10px; 
 
    margin-right:10px; 
 
}

<div class="box"> 
 
    <img class="map" src="http://fillmurray.com/200/300" alt="Home delivery area" /> 
 
    <p> 
 
    
 
    Text text Text textText textText textText textText textText text <br /> 
 
    Text textText textText textText textText textText textText textText text.<br> 
 
    Text textText textText textText textText textText textText textText text<br /> 
 
    Text textText textText textText text. <br /> 
 
    <br /> 
 
    <br /> 
 
    Text textText textText textText textText textText textText textText text 
 
    <br /> 
 
    Text textText textText textText textText textText textText textText text 
 
    Text textText textText textText textText text 
 
    Text text Text textText textText textText textText textText text <br /> 
 
    Text textText textText textText textText textText textText textText text.<br> 
 
    Text textText textText textText textText textText textText textText text<br /> 
 
    Text textText textText textText text. <br /> 
 
    <br /> 
 
    <br /> 
 
    Text textText textText textText textText textText textText textText text 
 
    <br /> 
 
    Text textText textText textText textText textText textText textText text 
 
    Text textText textText textText textText text 
 
     Text textText textText textText text. <br /> 
 
    <br /> 
 
    <br /> 
 
    Text textText textText textText textText textText textText textText text 
 
    <br /> 
 
    Text textText textText textText textText textText textText textText text 
 
    Text textText textText textText textText text 
 

 
    </p> 
 
     </div>

来源

2017-06-19 15:46:39

我不允许使用浮动 –

您是否需要文字才能够并排显示图像，而不是在文字太大的情况下？ –

是的，在图像旁边 –

你可以使用一个容器和display:table属性并排文字像侧保留在任何时候。

p显示为table-cell将接受vertical-align将内容放置在顶部，中间或底部。

最后，direction可以用来重新安排布局

.box { 
 
    display: table; 
 
    direction: rtl;/* lay ps from right to left , mind a reset to the children for the text inline contents */ 
 
    border-spacing: 10px;/* instead the margin */ 
 
} 
 

 
p { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    direction: initial;/* back to your document direction */ 
 
}

<div class="box"> 
 
    <p> 
 
    <img class="map" src="map.png" alt="Home delivery area" /> 
 
    </p> 
 
    <p> 
 
    Text text Text textText textText textText textText textText text <br /> Text textText textText textText textText textText textText textText text.<br> Text textText textText textText textText textText textText textText text<br /> Text textText textText 
 
    textText text. <br /> 
 
    <br /> 
 
    <br /> Text textText textText textText textText textText textText textText text 
 
    <br /> Text textText textText textText textText textText textText textText text <br /> Text textText textText textText textText text 
 

 
    </p> 
 
</div>

来源

2017-06-19 15:55:38

将文本和图像并排排列并排列在顶部

回答

相关问题