Текст не в правильном положении с плавающей точкой: слева - PullRequest
Новая
       1

Текст не в правильном положении с плавающей точкой: слева

0 голосов
/ 07 мая 2018

У меня проблема, я хотел разместить текст рядом с изображением, как показано на рисунке.Но это не работает.Я только начинаю путешествие по 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>

Изображения:

HTML, CSS и jpg файл внутри zip-файла на GoogleDrive .

Ответы [ 4 ]

0 голосов
/ 07 мая 2018

Вы можете использовать таблицу, чтобы взять все это описание справа от изображения. См. Следующий 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>

0 голосов
/ 07 мая 2018

сумма 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%;
}
0 голосов
/ 07 мая 2018

Добавьте это к вашей цитатеR 

#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>
0 голосов
/ 07 мая 2018

Изменить width из #quoteL + #quoteR <= <code>#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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...