0

divタグを使用した3列のレイアウトに関して、ここで多くの質問を見てきました。これは私が達成したいことです。

ただし、テキストやその他のコンテンツをどこに入力するかがわかりません。たとえば、列1を結婚式の写真に関連付け、列2をポートレート写真に関連付け、列3にクリック可能なソーシャルメディアボタンを配置します（Iこれらのコードを持っている）とそれらについてのいくつかの言葉。

私はサイトのテンプレートに慣れていますが、非常に古いテンプレートを超えてzenfolioWebサイトをカスタマイズしたいと思います。

4

3 に答える 3

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

構造化された CSS コードをオンザフライで生成するこの Web サイトを試してみてください。

  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 
<!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 ( left、right、middle ) を使用すると操作が簡単になります。

パディングを使用して列間にスペースを追加できますが (コード例で追加したように)、パディングはラッパーではなく新しい 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 に答える