文本不在浮动的正确位置：左

【问题标题】：Text isn't in a proper position with float: left文本不在浮动的正确位置：左
【发布时间】：2018-06-14 17:27:02
【问题描述】：

我有一个问题，我想在图片旁边放一个文字，如图所示。但它不起作用。我刚刚开始 CSS 和 HTML 之旅，所以如果错误是可耻的，请不要责怪。

我没有忘记 float: left 和 clear: both 行，所以我猜这可能意味着宽度或高度太小而无法容纳文本。

我将在此处粘贴一个堆栈 sn-p。带有图片的压缩包也将包含在内，以防您想了解它是如何工作的。

body {
  background-color: #444444;
  font-family: 'Didact Gothic', sans-serif;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  color: white;
}

#container {
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
}

#logo {
  text-align: center;
  padding: 15px;
  background-color: #303030;
  color: white;
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 30px;
}

#navbar {
  background-color: black;
  margin-top: 20px;
  padding: 10px;
}

.click {
  float: left;
  margin-left: 20px;
}

.click:hover {
  cursor: pointer;
  background-color: green;
}

#quote {
  height: 230px;
  width: 980px;
  padding: 10px;
  background-color: red;
  margin-top: 20px;
  margin-bottom: 25px;
}

#quoteL {
  float: left;
  width: 200px;
  height: 250px;
}

#quoteR {
  float: left;
  width: 800px;
  font-size: 16px;
  text-align: justify;
}

.bigtitle {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 2px;
}
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8" />
  <title>Angielski - Nauka angielskiego dla zainteresowanych</title>
  <meta name="keywords" content="angielski, English, english, nauka angielskiego, angielskiego, nauka, online, nauka angielskiego online,
efektywna nauka, prosta gramatyka, gramatyka, słownictwo, tłumaczenie,
pomoc, jak" />
  <meta name="description" content="Ta strona pomoże ci nauczyć się angielskiego w wolnym czasie bez problemu i z przyjemnością!" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <link rel="stylesheet" href="style.css" type="text/css" />
  <link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Lato:400,400i,700,900&amp;subset=latin-ext" rel="stylesheet"> </head>

<body>
  <div id="container">

    <div id="logo">English 4 Everyone :D</div>

    <div id="navbar">
      <div class="click">TO BE</div>
      <div class="click">TO HAVE/TO HAVE GOT</div>
      <div class="click">PRESENT SIMPLE</div>
      <div style="clear:both;"></div>
    </div>

    <div id="quote">
      <div id="quoteL">
        <img src="swan.jpg" />
      </div>
      <div id="quoteR">
        <span class="bigtitle">Quote to success:</span> "Our job in grammar teaching is not to describe the language, as a grammarian does.It is to build a bridge from A (what the student knows) to B (what we want him/her to know next). If the bridge
        is too long it will collapse." ~Michael Swan source: https://mikeswan.net/some-things-i-believe/
      </div>
      <div style="clear: both;"></div>
    </div>

  </div>
</body>

</html>

图片：

Google Drive 上的 zip 文件中的 HTML、CSS 和 jpg 文件。

【问题讨论】：

标签： html css image text


【解决方案1】：

更改#quoteL+#quoteR的width#quote
如果您希望 img 不要退出红色部分，请将 height 更改为 更小 然后 #quote height 

    body {
    background-color: #444444;
    font-family: 'Didact Gothic', sans-serif;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    color: white; }

    #container {
    margin-left: auto;
    margin-right: auto;
    width: 1000px; }

    #logo {
    text-align: center;
    padding: 15px;
    background-color: #303030;
    color: white;
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 30px; }

    #navbar {
    background-color: black;
    margin-top: 20px;
    padding: 10px; }

    .click {
    float: left;
    margin-left: 20px; } .click:hover {
    cursor: pointer;
    background-color: green; }

    #quote {
    height: 230px;
    width: 980px;
    padding: 10px;
    background-color: red;
    margin-top: 20px;
    margin-bottom: 25px; }

    #quoteL {
    float: left; 	width: 180px;
    height: 180px; }

    #quoteR {
    float: left;
    width: 800px; 	font-size: 16px; 	text-align: justify; }
#quoteL img{ height: 210px;}
    .bigtitle {
    font-size: 32px; 	font-weight: 900; 	letter-spacing: 2px;
display: block;

 }
    <!DOCTYPE HTML> <html> <head>
    <meta charset="utf-8" />
    <title>Angielski - Nauka angielskiego dla zainteresowanych</title>   
    <meta name="keywords" content="angielski, English, english, nauka angielskiego, angielskiego, nauka, online, nauka angielskiego online,
    efektywna nauka, prosta gramatyka, gramatyka, słownictwo, tłumaczenie,
    pomoc, jak" />
    <meta name="description" content="Ta strona pomoże ci nauczyć się angielskiego w wolnym czasie bez problemu i z przyjemnością!" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Lato:400,400i,700,900&amp;subset=latin-ext"
    rel="stylesheet"> </head> <body>
        <div id="container">
           
            <div id="logo">English 4 Everyone :D</div>
            
            <div id="navbar">
                <div class="click">TO BE</div>
                <div class="click">TO HAVE/TO HAVE GOT</div>
                <div class="click">PRESENT SIMPLE</div>
                <div style="clear:both;"></div>
            </div>
            
            <div id="quote">
               <div id="quoteL">
                    <img src="https://i.stack.imgur.com/8hZeG.jpg" />
                </div>
                <div id="quoteR">
                    <span  class="bigtitle">Quote to success:</span>
                    "Our job in grammar teaching is not to describe the language, as a grammarian does.It is to build a bridge from A
    (what the student knows) to B (what we want him/her to know next). If
    the bridge is too long it will collapse." ~Michael Swan
                    source: https://mikeswan.net/some-things-i-believe/
                </div>
                <div style="clear: both;"></div>
            </div>
            
            </div> </body> </html>

【讨论】：

  • 如果您需要更多帮助，请告诉我
  • 文本需要一些替换，我想使用边距它会起作用，但我仍然有图像之间的空间，我想覆盖。图像也太低了。虽然它在“红色 div 对象块”中。感谢您的帮助！
  • 只对右和上/下使用边距以防止空格
  • 你想要红色部分高度中心的图像吗？
  • 不，我宁愿将文本粘在红色块的顶部（标题以粗体显示），然后用一些
    分隔其他文本。我想添加一些margin-top，这样它就不会“粘”到这个
    的顶部。现在我正在使用另一种方法，它可以工作，但现在宽度比此页面中的其余对象高一点。 imgur.com/a/0wTHX6I 这是 Paul Tanne 编写的代码，在他的部分的 cmets 中我写了一些更改，我应用了这些更改以使图像适合，但这里的宽度仍然太大。
【解决方案2】：

将此添加到您的报价中

#quoteR {
  float: left;
  width: calc(100% - 200px); /*200px is width of image*/
  font-size: 16px;
  text-align: justify;
  padding-left: 10px;
  box-sizing: border-box;
}

使用calc，您可以从父级的宽度中减去图像的宽度。 calc 的值将分配给 #quoteR

body {
  background-color: #444444;
  font-family: 'Didact Gothic', sans-serif;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  color: white;
}

#container {
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
}

#logo {
  text-align: center;
  padding: 15px;
  background-color: #303030;
  color: white;
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 30px;
}

#navbar {
  background-color: black;
  margin-top: 20px;
  padding: 10px;
}

.click {
  float: left;
  margin-left: 20px;
}

.click:hover {
  cursor: pointer;
  background-color: green;
}

#quote {
  /*height: 230px;*/
  width: 980px;
  padding: 10px;
  background-color: red;
  margin-top: 20px;
  margin-bottom: 25px;
  clear: both;
}

#quoteL {
  float: left;
  width: 200px;
  height: 250px;
}

#quoteR {
  float: left;
  width: calc(100% - 200px);
  font-size: 16px;
  text-align: justify;
  padding-left: 10px;
  box-sizing: border-box;
}

.bigtitle {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 2px;
}
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8" />
  <title>Angielski - Nauka angielskiego dla zainteresowanych</title>
  <meta name="keywords" content="angielski, English, english, nauka angielskiego, angielskiego, nauka, online, nauka angielskiego online,
    efektywna nauka, prosta gramatyka, gramatyka, słownictwo, tłumaczenie,
    pomoc, jak" />
  <meta name="description" content="Ta strona pomoże ci nauczyć się angielskiego w wolnym czasie bez problemu i z przyjemnością!" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <link rel="stylesheet" href="style.css" type="text/css" />
  <link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Lato:400,400i,700,900&amp;subset=latin-ext" rel="stylesheet"> </head>

<body>
  <div id="container">

    <div id="logo">English 4 Everyone :D</div>

    <div id="navbar">
      <div class="click">TO BE</div>
      <div class="click">TO HAVE/TO HAVE GOT</div>
      <div class="click">PRESENT SIMPLE</div>
      <div style="clear:both;"></div>
    </div>

    <div id="quote">
      <div id="quoteL">
        <img src="https://i.stack.imgur.com/8hZeG.jpg]" />
      </div>
      <div id="quoteR">
        <span class="bigtitle">Quote to success:</span> "Our job in grammar teaching is not to describe the language, as a grammarian does.It is to build a bridge from A (what the student knows) to B (what we want him/her to know next). If the bridge
        is too long it will collapse." ~Michael Swan source: https://mikeswan.net/some-things-i-believe/
      </div>
      <div style="clear: both;"></div>
    </div>

  </div>
</body>

</html>

【讨论】：

  • 它有效，谢谢，但还有一件事 - 是否有可能在这张图片中显示一点宽度（蓝线切割的部分）：imgur.com/a/fkqjBz5 如果没有t 我将调整其他
    块的大小，使它们看起来相似。感谢您花时间帮助我！
  • @znaczki654 和你的图片类似，红色的div在旁边
【解决方案3】：

您可以使用表格将整个描述放在图像的右侧。请参考以下 html 代码。 

<div id="logo">English 4 Everyone :D</div>

<div id="navbar">
  <div class="click">TO BE</div>
  <div class="click">TO HAVE/TO HAVE GOT</div>
  <div class="click">PRESENT SIMPLE</div>
  <div style="clear:both;"></div>
</div>

<table id="quote">
<tr>
  <td>
    <div id="quoteL">
      <img src="swan.jpg" />
    </div>
  </td>
  <td>
    <div id="quoteR">
    <span class="bigtitle">Quote to success:</span> "Our job in grammar teaching is not to describe the language, as a grammarian does.It is to build a bridge from A (what the student knows) to B (what we want him/her to know next). If the bridge
    is too long it will collapse." ~Michael Swan source: https://mikeswan.net/some-things-i-believe/
  </div>
  </td>
</tr>     

  <div style="clear: both;"></div>
</table>

【讨论】：

    【解决方案4】：

    quoteL 和quoteR 的总和不等于quote，你可以改变他，或者如果你想你可以用 % 代替 px 来更好地查看大小:) 

    #quote
{
    height: 230px;
    width: 100%;
    padding: 10px;
    background-color: red;
    margin-top: 20px;
    margin-bottom: 25px;
}

#quoteL
{
    float: left;
    width: 20%;
    height: 250px;
}

#quoteR
{
    float: left;
    margin-left: 5%;
    width: 70%;
    font-size: 16px;
    text-align: justify;
}
#logo
{
    text-align: center;
    padding: 10px;
    background-color: #303030;
    color: white;
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 30px;
    width:100%;
}

#navbar
{
    background-color: black;
    margin-top: 20px;
    padding: 10px;
    width:100%;
}

    【讨论】：

    • 这几乎是我想要的，我改变了一点代码，整个图片都在正确的块中。虽然，宽度并不令人满意，但我想稍微裁剪一下这一边......我应该在某个地方更改 % 的值以达到我的意愿吗？ ` #quote { 高度：260px;宽度：100%；填充：10px；背景颜色：红色；边距顶部：20px；边距底部：25px； }` 我实际上添加了一点高度以使图片适合那里。显示我当前问题的图片：imgur.com/a/0wTHX6I
    • 查看编辑 :) 有时你放置 15 像素的填充，有时 10 像素。我在你所有的块中都设置了 100% 的宽度，并将填充设置为 10 px :)
    • 我想认识你 IRL paul tanné，这样的 css 专家！
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode