Как исправить тег div и сделать так, чтобы весь последующий контент отображался за пределами div - PullRequest
Новая
       77

Как исправить тег div и сделать так, чтобы весь последующий контент отображался за пределами div

0 голосов
/ 07 августа 2020

Предположим, у меня есть следующий HTML / CSS: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        html,body {
          height: 100%;
        }
        body {
          margin: 0;
        }
    </style>
</head>
<body>
    <div style="width: 20%; height: 100%; background-color: red">Text Inside the div</div>
    Text Outside the div
</body>
</html>

Я хочу, чтобы весь последующий текст после <div style="width: 20%; height: 100%; background-color: red">Text Inside the div</div> отображался непосредственно справа от этого тега div, а не начинался снова в левой части браузера. Есть ли способ сделать это, кроме как иметь еще один тег div после первого и делать что-то вроде смещения его вправо / с плавающей точкой?

Ответы [ 3 ]

3 голосов
/ 07 августа 2020

Это то, что вам нужно. Для этого можно использовать display: inline-flex. 

body {
  height: 100%;
}

body {
  margin: 0;
}

div {
  width: 20%;
  background-color: red;
  display: inline-flex;
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div>Text Inside the div</div>Text Outside the div
</body>

</html>
0 голосов
/ 07 августа 2020

Если вы хотите контролировать положение / поведение двух элементов относительно друг друга, я бы посоветовал посмотреть, как вы можете изменить их родительский элемент. В этом случае установка родительского элемента display: flex поможет.

Обратите внимание, что вам нужно установить ширину родительского элемента, чтобы он занимал всю ширину области просмотра браузера для вашего div шириной 20%, чтобы умею подбирать размер. 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        html,body {
          height: 100%;
          width: 100%;
          display: flex;
        }
        body, p {
          margin: 0;
          padding: 0;
        }
    </style>
</head>
<body>
    <div style="width: 20%; height: 100%; background-color: red">Text Inside the div</div>
        Text Outside the div
</body>
</html>
0 голосов
/ 07 августа 2020

Вы хотите, чтобы ваш текст после div шел сразу после div справа от него? Если это так, вы можете использовать flexbox в теле: 

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        html,body {
          height: 100%;
        }
        body {
          margin: 0;
display:flex;
        }
    </style>
</head>
<body>
    <div style="width: 20%; height: 100%; background-color: red">Text Inside the div</div>
    Text Outside the div
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...