Question

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

我没有忘记float: left和clear: both行，所以我猜这可能意味着宽度或高度太小而不适合文字。

我会在这里粘贴一个堆栈代码段。带有图片的拉链包也将包含在内，以防您想知道它是如何工作的。

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文件。

Answer 1

更改width + #quoteL＆lt; = #quoteR的{{1}}个如果您希望红色部分的#quote 不要，请将img更改为更小，然后height {{1} }

＆＃13;

#quote

＆＃13;

height

＆＃13;

Answer 2

quoteL和quoteR的总和不等于引用，你可以改变他或者如果你想要你可以做％而不是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%;
}

Answer 3

将此添加到ur quoteR

#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>

Answer 4

您可以使用表格将整个描述带到图像的右侧。请参阅以下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 个答案: