个人中心
gpt4 book ai didi

html - 如何在正文内容的左侧制作 float 图像？

转载 作者：太空宇宙 更新时间：2023-11-04 00:34:53 24 4
gpt4 key购买 nike

我正在尝试了解 html 的基础知识，我编写了这段小代码，但我不知道如何使正文内容的图像左侧。

<html>
<img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg" alt="Smiley face" style="float:left;width:42px;height:42px;">

<style>
    body {
        width: 15em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>

<body>
“People say nothing is impossible, but I do nothing every day."
<p>– A. A. Milne</p>
</body>


</html>

你可以从这里看到页面:page

因此您可以看到图像已经取代了正文内容，当您删除图像 block 并再次运行它时，您会注意到正文内容返回到它的实际位置。 enter image description here enter image description here

我想要这样:

enter image description here

那么如何在不取代正文内容的情况下将 float 图像放在正文内容的左侧？

最佳答案

如果我没有正确理解您的问题，虽然图像位于左侧，但您希望文本正文保持内联。

是这样的吗？ https://www.w3schools.com/code/tryit.asp?filename=GAUA12AA769P 

<style>
    .post-container {
        margin: 20px 20px 0 0;
        overflow: auto;
    }

    .post-thumb {
        float: left;
    }

    .post-thumb img {
        display: block;
        width: 42px;
        height: 42px;
    }

    .post-content {
        margin-left: 50px;
    }
</style>

<body>
    <div class="post-container">
        <div class="post-thumb"><img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg" /></div>
        <div class="post-content">
            <p>“People say nothing is impossible, but I do nothing every day."</p>
            <p>– A. A. Milne</p>
        </div>
    </div>
</body>

最值得注意的是，我在图像中添加了 display: block; 并在文本内容上设置了 margin-left: 50px;。

编辑 https://www.w3schools.com/code/tryit.asp?filename=GAUA575L092N 

<style>
    body {
        width: 15em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .post-container {
        margin: 20px 20px 0 0;
        overflow: auto;
    }

    .post-thumb {
        margin-top: 30px;
        float: left;
    }

    .post-thumb img {
        display: block;
        width: 42px;
        height: 42px;
    }

    .post-content {
        margin-left: 50px;
    }
</style>

<body>
    <div class="post-container">
        <div class="post-thumb"><img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg" /></div>
        <div class="post-content">
            <p>“People say nothing is impossible, but I do nothing every day."</p>
            <p>– A. A. Milne</p>
        </div>
    </div>
</body>

我已经添加了主体样式。图像上有一个 margin-top 将其向下推到文本的中心，但是如果您希望图像出现在文本的左上角，只需删除 margin-top : 30px 来自 .post-thumb 类。

更好的选择是使用像 flexbox 这样的东西然而，为此。

编辑 2:

我已经更新了我的代码以使用 flexbox，这是一个更加简洁明了的解决方案。您可以阅读更多关于 here 的信息.

"This is an approach to layout creation, alignment of elements and distribution of extra space.

Flex stands for flexible, adaptive. Flexboxes are thus flexible elements of the layout. One of the main advantages of flexbox is the ability to fill extra space without the need to use Javascript."

https://www.w3schools.com/code/tryit.asp?filename=GAUAC9HBCS2S 

<style>
    body {
        width: 15em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .flex-item {
        display: flex;
        align-items: center;
    }

    .flex-item img {
        flex-grow: 0;
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        margin-right: 15px;
    }
</style>

<body>
    <div class="flex-item">
        <img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg">
        <div>
            <p>“People say nothing is impossible, but I do nothing every day."</p>
            <p>– A. A. Milne</p>
        </div>
    </div>
</body>

关于html - 如何在正文内容的左侧制作 float 图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59706089/

24 4 0
文章推荐： node.js - Nodejs 中的三重 DES 与通过 openssl 的比较
文章推荐： Python matplotlib/Seaborn stripplot 与点之间的连接
文章推荐： javascript - 在 bash 脚本中使用进程替换时， Node 找不到模块
文章推荐： c - 在字符表示中打印特定的十六进制值
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com