时间戳

首页 > 解决方案 > 将图像放在文本旁边的问题（不是浮动问题）

html - 将图像放在文本旁边的问题（不是浮动问题）

问题描述

我尝试了所有关于这个CSS的事情HTML。这是一张图片，直观地解释了我想要做什么以及正在发生的事情 尝试边距、布丁、清除、垂直对齐等等。我现在已经厌倦了修复这个错误。我试图修复它大约一天。

在此处输入图像描述

顺便说一句，对于我可能很糟糕的帖子感到抱歉，这对这个网站来说很新。

.Intro_IMG {
    max-width: 192px;
    float: left;
    display: block;
    margin: 0 auto;
    box-align: middle;
}
.Intro{
    border: 1px solid black;
    background-color: #f9f9f9;
    margin-top: 48px;
    display: block;
    margin: 0 auto;
    overflow: auto;
}
<div class="Intro">
    <img class="Intro_IMG" src="https://placehold.it/192x192">
    <h3>Hey bien salut tout le monde c'est Sirius B !</h3>
    <p>Et vous vous trouvez ici sur mon site / projet HTML !</p>
    <p>Ce site est à la base là juste pour que je joue et apprenne l'HTML !</p>
    <p>Donc ici il y aura des trucs un peu random dans ce site car je peux.</p>
    <p>Sinon eh bien ce site sert un peu à rien donc... Ouais.</p>
</div>

有人告诉我显示整个代码，所以它是：

<!DOCTYPE html>
<html>
    <head>
        <title>Accueil</title>
        <link rel="stylesheet" type="text/css" href="css/ArchUI_Light.css">
        <link rel="icon" href="ressources/siriusblogo.png">
    </head>
    <body>
        <!--Navigation Bar-->
        <nav class="NavBar">
            <ul>
                <li><a href="accueil_dark.html">Accueil (Dark)</a> <a href="redirect/discord_light.html">Serveur Discord</a> <a href="redirect/youtube_light.html">Chaîne Youtube</a></li>
            </ul>
        </nav>
        <!--Main Title-->
        <img class="ML" src="ressources/siriusblogo.png">
        <h1>Le Site de Sirius B !</h1>
        <!--WIP Website Message-->
        <div class="WIP_MSG">
            <h2 class="Warning">Veuillez Notez !</h2>
            <p>Ce site est actuellement en développement.</p>
            <p>Il se peut que le site est moche remplis de bugs.</p>
            <p>Merci de votre compréhension.</p>
            <p>- Sirius B</p>
        </div>
        <!--Introduction-->
        <div class="Intro">
                <img class="Intro_IMG" src="https://placehold.it/192x192">
                <h3>Hey bien salut tout le monde c'est Sirius B !</h3>
                <p>Et vous vous trouvez ici sur mon site / projet HTML !</p>
                <p>Ce site est à la base là juste pour que je joue et apprenne l'HTML !</p>
                <p>Donc ici il y aura des trucs un peu random dans ce site car je peux.</p>
                <p>Sinon eh bien ce site sert un peu à rien donc... Ouais.</p>
                <div class="clearfix"></div>
            </div>
        <!--Other Info-->
    </body>
</html>

body {
    color: black;
    background-color: #f0f0f0;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
.NavBar {
    background-color: #f9f9f9;
    border: solid #f9f9f9;
    border-width: 10px;
    color: black;
    text-align: left;
}
.ML {
    max-width: 96px;
    margin-top: 48px;
    border: 1px solid black;
}
.ML_Borderless {
    max-width: 96px;
    margin-top: 48px;
}
.ML_Borderless-small {
    max-width: 48px;
    margin-top: 48px;
}
.Warning {
    color: red;
}
.Intro_IMG {
    max-width: 192px;
    float: left;
    display: block;
    margin: 0 auto;
    box-align: middle;
    margin-right: 12px;
}
.Intro{
    border: 1px solid black;
    background-color: #f9f9f9;
    margin-top: 48px;
    display: inline-block;
    margin: 0 auto;
}
.clearfix {
  clear: both;
}

标签： htmlcss

解决方案

您需要稍微更改一下您的 HTML 结构和 CSS。

.Intro将显示更改inline-block为width: auto。然后附加一个div内部以防万一您的文本高度小于图像.Intro。clear: both之后，将您的文本内容放在另一个 div 中以控制其宽度和高度。

.Intro_IMG {
    max-width: 192px;
    float: left;
    display: block;
    margin: 0 auto;
    box-align: middle;
    margin-right: 12px;
}
.Intro{
    border: 1px solid black;
    background-color: #f9f9f9;
    margin-top: 48px;
    display: inline-block;
    margin: 0 auto;
    width: auto;
}
.Intro_Content {
  max-height: 192px;
  overflow: hidden;
}
.clearfix {
  clear: both;
}
<div class="Intro">
    <img class="Intro_IMG" src="https://placehold.it/192x192">
    <div class="Intro_Content">
      <h3>Hey bien salut tout le monde c'est Sirius B !</h3>
      <p>Et vous vous trouvez ici sur mon site / projet HTML !</p>
      <p>Ce site est à la base là juste pour que je joue et apprenne l'HTML !</p>
      <p>Donc ici il y aura des trucs un peu random dans ce site car je peux.</p>
      <p>Sinon eh bien ce site sert un peu à rien donc... Ouais.</p>
    </div>
    <div class="clearfix"></div>
</div>

推荐阅读