Question

我有一个右边的图片，文字需要在左边的旁边，文字的开头与图片的顶部内联，我该怎么做？

#pic0 {
	width:100%;
}
#pic0img {
	display: inline-block;
	height: auto;
	margin-left:50%;
	width:100%;
	margin-bottom:5px;
}
pic0txt {
	margin-right:52%;
	width:48%;
}

<div id="pic0">
    	<div id="pic0img">
        <img src="Images/Activities/pic0.fw.png" width="50%"
        	onmouseover="this.src='Images/Activities/pic0.fw.png'"
			onmouseout="this.src='Images/Activities/pic0.fw.png'"          />
        </div>
        <div id="pic0txt">
        	<p>test</p>
        </div>
    </div>

Answer 1

在父级上使用flex，然后在每个弹性项目上使用flex-grow，使它们的宽度为50％，并将图像设置为width: 100%，以便填充它的父级。

.flex {
  display: flex;
}
.flex > div {
  flex-grow: 1;
  flex-basis: 0;
}
img {
  width: 100%;
}

<div class="flex">
  <div>
    <p>text</p>
  </div>
  <div>
    <img src="http://www.w3schools.com/css/paris.jpg">
  </div>
</div>

Answer 2

尝试这个简单易行的技巧：

<div id="pic0">
    <div id="pic0img">


        <p> <img src="http://images5.fanpop.com/image/photos/31300000/beautiful-heart-pic-beautiful-pictures-31395948-333-500.jpg" width="50%"
        onmouseover="this.src='Images/Activities/pic0.fw.png'"
        onmouseout="this.src='Images/Activities/pic0.fw.png'" />test</p>

    </div>

</div>

#pic0 {
    width:20%;
}
#pic0img {
    display: inline-block;
    height: auto;
    margin-left:50%;
    width:100%;
    margin-bottom:5px;
}

Answer 3

请参阅此简化代码段（删除仅用于测试的border）：

#pic0txt {
  display: inline-block; border:1px solid red;
  text-align:center;
  vertical-align:top;
  width:48%;
}

#pic0img {
  display: inline-block; border:1px solid red; 
  width:48%;
}

<div>
  <div id="pic0txt">test</div>
  <img id="pic0img" src="https://www-asp.azureedge.net/v-2016-11-01-012/images/ui/home-free-courses.png" />
</div>

<hr/>

<div>
  <img id="pic0img" src="https://www-asp.azureedge.net/v-2016-11-01-012/images/ui/home-free-courses.png" />
  <div id="pic0txt">test</div>
</div>

如何在图像内嵌显示文本？

3 个答案: