gpt4 book ai didi

html - 修复 div css 布局

转载 作者:行者123 更新时间:2023-11-28 10:18:28 25 4
gpt4 key购买 nike

帮助!有人知道如何解决 div 布局中的这个问题吗?

我正在尝试制作一个 div 布局,当网络浏览器放大或缩小时,它不会溢出,

这是我的例子,当我放大网络浏览器时,它变成了.., enter image description here

“header right”在“header left”的左侧向下,我想要的是 div“header left”,“header center”,“header right”继续放大,并且有 scroable bottom 这样 div 中的内容就不会溢出,像这样......, enter image description here

这是我的代码;

 **HTML**
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Help Div Fix</title>
<link type="text/stylesheet" href="css_layout.css">
</head>
<body>
<div id="header_div">
<div id="header_left">Header Left</div>
<div id="header_center">Header center</div>
<div id="header_right">Header Right</div>
</div>
</body>
</html>


**CSS**
body{
margin:0;
background:#EEF4F9;
}
#header_div{
width:100%;
float:left;
}
#header_left{
float:left;
height:50px;
width:330px;
background:#00F;
}
#header_center{
float:left;
height:50px;
width:330px;
background:#999;
}
#header_right{
float:left;
height:50px;
width:330px;
background:#666;
}

最佳答案

为您的父标题类添加最小宽度。

#header_div{
width:100%;
float:left;
min-width:990px;
}

JSFIDDLE DEMO

关于html - 修复 div css 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24120846/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com