Question

我想在html / css中将一个图像，一个段落和另一个图像放在一行中。

我让它以这种方式工作。

<html>
<body>
        <span style="float:left; display: inline-block; width: 20%;">
        <img src="https://pbs.twimg.com/profile_images/762369348300251136/5Obhonwa.jpg"  
         width="90" height="110" />
        </span>
        <span style="float:left;width: 60%;">
            <p style="float:left; display:block;">Lorem ipsum dolor sit amet,    
                consectetur adipiscing elit. Integer arcu mauris, ullamcorper et 
                ligula vitae, hendrerit sodales tellus. Maecenas quis pulvinar 
                lacus.</p>
        </span>
        <span style="float:right; width 20%;">
            <img src="https://www.google.ca/doodle4google/images/splashes/featured.png" width="90" height="110">
        </span>  
</body>
</html>

我知道我可以在外部css表或样式标签中进行，但是它可以用于作业，所以我必须做三件事。

Answer 1

以下是一个示例：https://jsfiddle.net/sp6ykv66/

HTML：

<img src="https://dummyimage.com/100x100/000/fff" alt="">
<p class="inline">Lorem Ipsum</p>
<img src="https://dummyimage.com/100x100/000/fff" alt="">

CSS：

.inline{display: inline-block;}

Answer 2

.parent{
display:flex;
justify-content:center;
align-items:center;
flex-direction:row;
}

.children{
// whatever you want
// your paragraph and imgs need to be children of parent
}

所以你的段落和imgs需要在div class =“parent”

中

所以显示：flex影响divs children aka paragraph和imgs

注意：我在电话上

Answer 3

您可以使用（在h4元素上，因为它们默认是块）

display: inline-block;

或者你可以将元素浮动到左边/右边

float: left;

不要忘记在

之后清除花车

clear: left;

或尝试

h4{width:80px;float:left}

<h4 class='liketext'><img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/>$likes</h4>
<h4 class='liketext'> <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/></h4>

如何将图像，段落和另一个图像放在同一行？

3 个答案: