Увеличьте область вокруг текста при уменьшении

Question

Я хочу, чтобы черная область, окружающая мой текст, увеличивалась при уменьшении масштаба, а не становилась белой областью слева от моего текста, что и происходит в настоящее время. Я попытался установить ширину: авто; на двух div, но затем черная часть исчезла полностью. Вот мой код CSS:

@font-face {
font-family: "Consolas";
src: url("Consolas.ttf");
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
main {
    position: relative;
}
 p{
     display: inline-block;
    font-size:15px;
    font-family: "Consolas";
    margin: 0 3px;
    width: 900px;
    position:relative;

}
.div1{
    background-color: black;
    float: right;
    height: 40000px;
    width: 50px;
}
.div2{
    background-color: black;
    float: left;
    height: 40000px;
    width: 50px;
}

Я новичок, и мой друг помог мне с кодом, поэтому я понимаю, что могу ошибиться, но заранее спасибо :)

css

1

Jonatan Juul Pedersen

Answer 1

Я изменил вашу HTML-разметку и использовал flexbox для достижения чего-то похожего на то, что (я надеюсь) вы имеете в виду:

.demo { 
  display: flex;
  height: 100vh;
  background: black; 
}
.demo p {
  padding-top: 50vh;
  background: white;
  min-width: 900px; 
  margin: 0;
  white-space: nowrap;
  overflow-x:  auto;
  overflow-y: hidden;
}
.demo div {width: 50px; background: black;}

<div class="demo">
  <div class="div1"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec ipsum aliquam enim faucibus ultricies ut imperdiet ex. Phasellus ut quam sed velit ultrices tempor non eget urna. In vehicula sodales ante ut malesuada. In odio elit, congue a gravida id, semper non tellus.</p>
  <div class="div2"></div>
</div>

Если что-то не ясно, не стесняйтесь спрашивать, и я с удовольствием отвечу. Наслаждайтесь кодом!

Answer 2

Вы имеете в виду увеличение браузера?

    .zoom
{
    zoom: 150%;
    background-color: black;
    */ your remaining styles*/

}

Увеличьте область вокруг текста при уменьшении

2 ответа

Новые вопросы

css