Html 在一个div旁边安排两个div，且不溢出
我是一个网络设计新手，我已经被卡住了。我正在使用Joomla制作一个网站，我正在尝试制作如下所示的div 我看到可以通过将宽度设置为%来实现这一点的代码 我想做的是Html 在一个div旁边安排两个div，且不溢出,html,css,Html,Css,我是一个网络设计新手，我已经被卡住了。我正在使用Joomla制作一个网站，我正在尝试制作如下所示的div 我看到可以通过将宽度设置为%来实现这一点的代码 我想做的是 • Div 1 can be as wide as its contents (picture mostly) <br> • Div 2 is the header and is usually single line <br> • Div 3 is the body and no matter how lo
• Div 1 can be as wide as its contents (picture mostly) <br>
• Div 2 is the header and is usually single line <br>
• Div 3 is the body and no matter how long it is, it should not come below Div 1. So basically Div 1 should be as long as the container.
提前感谢您的时间。在px或em中定义您的div的宽度，因为您希望在整个网页中有多个div部分。在web开发的初始阶段，在%中调整所有内容是相当棘手的 对于对齐，您可以使用百分比参考css的浮点属性： 基于百分比的布局 要使图像占据全部可用空间，您可以执行以下操作：
img {
max-width:100%;
height:auto;
}
我不允许边栏像内容一样宽。如果你有图像，让图像填充一个定义的宽度，即使你有它是一个页面的比例，以%为单位。这样做的风险在于，如果你的图像更宽，它将影响你的页面设计 下面是一个快速示例，说明您正在努力实现的目标：
<html>
<head>
<style>
div{
display:block;
margin:0;
padding:0;
}
#div1{
float:left;
width:30%;
padding: 1%;
border:1px solid black
}
#div2{
float:right;
width: 64%;
padding:1%;
border:1px solid red
}
#div3{
float:right;
width: 64%;
padding:1%;
border:1px solid yellow
}
</style>
</head>
<body>
<div id="div1">div 1<br />This is your sidebar</div>
<div id="div2">div 2 <br /> This is your header line</div>
<div id="div3">div 3 <br />This is your body container</div>
</body>
</html>
这不是一个愚蠢的问题，欢迎来到stack overflow！
html,body {
margin: 0;
padding: 0;
}
.container {
position: relative;
overflow: hidden;
width: 990px;
margin: 0 auto;
}
.inner {padding: 20px 10px;}
.left {
float: left;
width: 200px;
}
.main {
float: right;
width: 700px;
margin-left: 10px;
}
.header h1 {margin: 0;}
.content {
margin-top: 10px;
}
<div class="container">
<div class="inner">
<div class="left">I am the left side.</div>
<div class="main">
<div class="header">
<h1>I am the header</h1>
</div>
<div class="content">I am the content</div>
</div>
</div>
</div>
<html>
<head>
<style>
div{
display:block;
margin:0;
padding:0;
}
#div1{
float:left;
width:30%;
padding: 1%;
border:1px solid black
}
#div2{
float:right;
width: 64%;
padding:1%;
border:1px solid red
}
#div3{
float:right;
width: 64%;
padding:1%;
border:1px solid yellow
}
</style>
</head>
<body>
<div id="div1">div 1<br />This is your sidebar</div>
<div id="div2">div 2 <br /> This is your header line</div>
<div id="div3">div 3 <br />This is your body container</div>
</body>
</html>