并排放置文本和图像，将文本对齐到顶部

Question

我正在尝试将图像和文字并排放在右边的图像和左边的文字上，文字在顶部对齐 但它保持在底部对齐

这是我的代码

 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>

任何建议我做错了

Answer 1

首先放置文本，然后放置像这样的图像

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>

`

Answer 2

使用flexbox并将方向更改为行反转。您可以将所有内容放在一个元素类中。

＆＃13;

＆＃13;

java.lang.IllegalStateException: Job with ID <jobId> is not stoppable.

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

JSFiddle

Answer 3

我知道你说你不想使用浮动，但它可能会有所不同。特别是如果你将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>

Answer 4

您可以使用单个容器和display:table属性随时将文本图片并排。

显示为p的

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

最后，direction可用于重新排列布局

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;