Question

我是网页设计新手，我已经陷入困境。我正在使用Joomla建立一个网站，我正在尝试制作div，如下所示

enter image description here

我看到代码可以通过设置宽度％来实现。

我想做的是

• 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.

这可能是一个非常愚蠢的问题，但我不知道如何做到这一点。

感谢您提前抽出时间。

Answer 1

在px或em中定义div的宽度，因为你想要在你的网页上有多个div部分。在web开发的初始阶段，调整％中的所有内容都非常棘手。

对于对齐，您可以引用css http://css-tricks.com/all-about-floats/

的 float 属性

Answer 2

百分比：http://codepen.io/anon/pen/wEcse 基于百分比的布局

html,body {
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  overflow: hidden;
  max-width: 1140px;
  margin: 0 auto;
}
.inner {padding: 20px 10px;}
.left {
  float: left;
  width: 25%;
}
img {
  max-width:100%;
  height:auto;
}
.main {
  float: right;
  width: 70%;
  margin-left: 5%;
}
.header h1 {margin: 0;}
.content {
  margin-top: 10px;
}

要使图像占用完整的可用空间，您可以这样做：

img {
  max-width:100%;
  height:auto;
}

像素布局 http://codepen.io/anon/pen/gGapt

<强> CSS

 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;
}

<强> HTML

<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>

Answer 3

我不允许侧边栏与内容一样宽。如果您有图像，请使图像填充定义的宽度（即使您有一定比例的页面，以％表示）。这样做的风险是，如果您的图像更宽，则会影响您的页面设计。

以下是您要实现的目标的快速示例：

<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>

在一个div旁边安排两个div而不会溢出

3 个答案: