0

我在这里看到了很多关于使用 div 标签的 3 列布局的问题，这是我想要实现的。

但是我不知道在哪里输入文本和其他内容，例如我希望第 1 列与婚纱摄影相关，第 2 列与人像摄影相关，第 3 列具有可点击的社交媒体按钮（我有这些代码）和关于它们的几句话。

我习惯于模板网站，但我想自定义我的 zenfolio 网站，而不是他们非常过时的模板。

4

3 回答 3

0

试试这个网站，它会即时生成结构化的 CSS 代码。

  1. http://www.zurb.com/playground/css-grid-builder（我的选择）
  2. http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
于 2012-06-24T04:48:28.670 回答
0

试试这个，它使用引导程序http://twitter.github.com/bootstrap/，你可以很容易地实现这个并且可以使用引导程序的很多组件。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Demo Layout with 3 columns</title>
    <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
    <style type='text/css'>
        .container-fluid > .sidebar
        {
            position: relative;
            top: 0;
            left: auto;
            width: 220px;
        }
        .left
        {
            float: left;
        }
        .right
        {
            float: right;
        }
        .fixed-fluid
        {
            margin-left: 240px;
        }
        .fluid-fixed
        {
            margin-right: 240px;
            margin-left: auto !important;
        }
        .fixed-fixed
        {
            margin: 0 240px;
        }
    </style>
    <style type="text/css">
        body
        {
            padding-top: 60px;
        }
    </style>
</head>
<body>
    <div class="topbar">
        <div class="topbar-inner">
            <div class="container-fluid">
                <a class="brand" href="#">My Demo Layout</a>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="sidebar left">
            <div class="well">
                <h5>
                    Left Siderbar Menu</h5>
                <ul>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Product</a></li>
                </ul>
            </div>
        </div>
        <div class="sidebar right">
            <div class="well">
                <h5>
                    News</h5>
                <p>
                    News About Project !! About Project !! About Project !!</p>
            </div>
        </div>
        <div class="content fixed-fixed">
            <!-- Main block center -->
            <div class="hero-unit">
                <h1>
                    About Project!!</h1>
                <p>
                    About Project !! About Project !! About Project !! About Project !! About Project
                    !! About Project !! About Project !! About Project !!</p>
                <p>
                    <a class="btn primary large">More &raquo;</a></p>
            </div>
            <footer>
          <p>&copy; Company 2012</p>
        </footer>
        </div>
    </div>
</body>
</html>
于 2012-06-23T11:42:42.283 回答
0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

#left_wrapper {
  width: 33%;
  float: left;
  position: relative;
}

#middle_wrapper {
  width: 33%;
  float: left;
  position: relative;
}

#right_wrapper {
  width: 33%;
  float: left;
  position: relative;
}

#left {
  padding: 10px 60px;
}

#right {
  padding: 10px 60px;
}

#middle {
  padding: 10px 60px;
}
</style>
</head>
<body>
  <div id="left_wrapper"> 
  <div id="left">
  <p>This is the left text :  This is the left text : 
    This is the left text :  This is the left text :
    This is the left text :  This is the left text :
    This is the left text :  This is the left text :
  </p>
  </div>
  </div>
  <div id="middle_wrapper"> 
  <div id="middle">
  <p>This is the middle text : this is the middle text 
    This is the middle text : this is the middle text 
    This is the middle text : this is the middle text 
    This is the middle text : this is the middle text 
    This is the middle text : this is the middle text 
  </p> 
  </div>
  </div>
  <div id="right_wrapper">
    <div id="right"> 
   <p>This is the right text : This is the right text 
     This is the right text : This is the right text 
    This is the right text : This is the right text 
    This is the right text : This is the right text 
   </p>
   </div>
   </div>
</body>
</html>

包装器定义树列，但其他 div（左、右、中间）允许更轻松的操作。

您可以使用填充在列之间添加间距（正如我在代码示例中添加的那样），但填充将在新的 div 上，而不是包装器上。

还有另一种方法，它实际上将一个 div 划分为列。

<!DOCTYPE html>
<html>
<head>
<style type="text/css"> 
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer does not support the column-count property.</p>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>

</body>
</html>

（很高兴我帮了忙）

于 2012-06-23T11:11:23.760 回答