Я хочу, чтобы черная область, окружающая мой текст, увеличивалась при уменьшении масштаба, а не становилась белой областью слева от моего текста, что и происходит в настоящее время. Я попытался установить ширину: авто; на двух 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;
}
Я новичок, и мой друг помог мне с кодом, поэтому я понимаю, что могу ошибиться, но заранее спасибо :)
2 ответа
Я изменил вашу 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>
Если что-то не ясно, не стесняйтесь спрашивать, и я с удовольствием отвечу. Наслаждайтесь кодом!
Вы имеете в виду увеличение браузера?
.zoom
{
zoom: 150%;
background-color: black;
*/ your remaining styles*/
}
Новые вопросы
css
CSS (каскадные таблицы стилей) - это язык таблиц стилей представления, используемый для описания внешнего вида и форматирования документов HTML (язык разметки гипертекста), XML (расширяемый язык разметки) и элементов SVG, включая (но не ограничиваясь) цвета, макет, шрифты, и анимации. Также описывается, как элементы должны отображаться на экране, на бумаге, в речи или на других носителях.