html - CSSテーブルの行のセルサイズを次の行のものから切り離す方法は?

Question

私は CSS の完全な初心者であり (これは文字通り私が書いた最初の CSS です)、HTML は比較的初心者です。さて、問題に：

レイアウトを作成しようとしていますが、やりたいことができないという問題に出くわしました。ここに私が持っているもののスクリーンショットがあります:

現状のままのレイアウトです。

私がやりたいのは、単にdiv「ホーム」、「ブログ」などを読み取り、div下の s と同じ幅にして、効果的にサイドバーと同じ Y で終わるようにすることです。そのようです：

私が達成したいこと。

HTML ファイルの本文には、装飾テキストを処理するbackgroundclassが含まれていますが、そこにないものはすべてと呼ばれる別のものにあります。に設定され、その内部には 2 つのクラス(マーク a ) が含まれます。1 つ目はナビゲーションを含み、2 つ目はメインとサイドバーのものを含みます (それらはすべてクラス、マーク付きです)。divdivcontainercontainerdisplay: tabledivrowdisplay: table-rowdivsectiondisplay: table-cell

CSS と、HTML をどのように構築しようとしたかの両方を示すために、ファイル全体を次に示します。

<?xml version="1.0" encoding="utf-8"?>
<!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" dir="ltr" lang="en-US">


<head>
    <title>mini</title>
    <style type="text/css">

        * {
            font-family: "Ubuntu", Helvetica, Arial, sans-serif;
            margin: 0;
        }

        body {
            padding: 100px 0 0 0;           
            background: white;
            color: #444444;
        }

        h1 {
            font-size: 48px;
            font-weight: bold;
            letter-spacing: -0.083333em;
            line-height: 1.3em;
            text-transform: lowercase;
        }

        p {
            line-height: 1.5em;
        }

        .container {
            overflow: hidden;
            padding: 24px 24px 24px 24px;
            border-spacing: 35px 35px;
            display: table;
        }

        .section {
            position: relative;
            padding: 24px 24px 24px 24px;
            border-width: 1px;
            border-style: solid;
            border-color: #888888;
            background: white;
            display: table-cell;
        }

        .background {
            position: absolute;
            margin: -124px -124px -124px -124px;
            z-index: -1;
            float: right;
            font-size: 54px;
            line-height: 1em;
            font-weight: bold;
            color: #eeeeee;
        }

        .row {          
            display: table-row;
        }

        #sidebar {
            width: 20%;
        }

        #navigation {
            font-size: 24px;
            font-weight: bold;
            text-transform: lowercase;
        }

        #empty {
        }

    </style>
</head>



<body>
    <div id="background" class="background">
        bgtext
    </div>

    <div id="foreground" class="container">
        <div class="row">
            <div id="navigation" class="section">
                navitext
            </div>
        </div>
        <div class="row">
            <div id="mainbody" class="section">
                <h1>Main</h1>
                maintext
            </div>
            <div id="sidebar" class="section">
                <h1>Sidebar</h1>
                sidetext
            </div>
        </div>
    </div>
</body>

</html>

score 3 · Accepted Answer

これを実現する 1 つの方法は、すべてのコンテンツのラッパーを作成することです。

#wrapper {
   width:960px;
   position: relative;
}

<div id="wrapper">

   <div id="header">Header</div>

   <! -- Other content related divs goes here -->

</div>

div は、header取得できる限り多くのスペース、つまり960px. wrapper特に指定がない限り、同じことが div 内の他の div にも適用されます (これが探しているものです)。

おそらく、この div を中央margin: 0 autoに配置して、Web サイトを大きな画面で見栄えよくする必要があります。

頑張ってください:-)

score 2 · Accepted Answer

あなたが何をしようとしているのか完全にはわかりませんが、ナビゲーションバーのアンカー間に等間隔が必要だと思います。その場合、JavaScriptは必要ありません。

各リンク間の距離が境界線へのパディングと同じになるように、両側にスペーサーを備えた中央のインラインブロックを使用します。

コードを参照してください：

<!-- In style: -->
...
#navigation > .spacer {
    display: inline-block;
    width: 5%;
    float: left;
}

#navigation > .navLink {
    display: inline-block;
    width: 22.5%;
    float: left;
    text-align: center;
}
...

...
<!-- Nav bar div -->
<div id="navigation" class="section">
    <div class="spacer">
        &nbsp;
    </div>
    <div class="navLink">
        link1
    </div>
    <div class="navLink">
        link2
    </div>
    <div class="navLink">
        link3
    </div>
    <div class="navLink">
        link4
    </div>
    <div class="spacer">
        &nbsp;
    </div>
</div>
...

必要に応じてフォーマットし、新しいナビゲーションバーをお楽しみください！
お役に立てば幸いです。

score -1 · Accepted Answer

display: table または display:table-cell は必要ありません。テンプレートデザインにこれを使用することはお勧めできません。セルにパディングを与えたい場合は、その要素の幅をそれぞれ最小化する必要があります。以下が役立つ場合があります。

<?xml version="1.0" encoding="utf-8"?>
<!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" dir="ltr" lang="en-US">


<head>
    <title>mini</title>
    <style type="text/css">

        * {
            font-family: "Ubuntu", Helvetica, Arial, sans-serif;
            margin: 0;
        }

        body {
            padding: 100px 0 0 0;           
            background: white;
            color: #444444;
        }

        #wrapper{
            width:80%;
            margin:auto;
        }

        #main{
            width:100%;
        }

        #navigation{
            border:black 1px solid;
            float:left;
            width:96%;
            padding:2%;
            margin-bottom:20px;
        }

        #mainbody{

            border:black 1px solid;
            float:left;
            width:75%;

            height:auto;
        }

         #sidebar{
            border:black 1px solid;
            float:right;
            width:23%;

            height:100%;

        }

    </style>
</head>



<body>
    <div id="wrapper">
        <div id="navigation">
            Home | blog | forum | about
        </div>

        <div id="main">
            <div id="mainbody">
                 <h1>Main</h1>
                    maintext maintext maintext maintext maintext maintext maintext maintext maintext
                    <br />
                    maintext maintext maintext maintext maintext maintext maintext maintext maintext
                    <br />
                    maintext maintext maintext maintext maintext maintext maintext maintext maintext
                    <br />
                    maintext maintext maintext maintext maintext maintext maintext maintext maintext
                    <br />
                    maintext maintext maintext maintext maintext maintext maintext maintext maintext
                    <br />
                    maintext maintext maintext maintext maintext maintext maintext maintext maintext
                    <br />
                    maintext maintext maintext maintext maintext maintext maintext maintext maintext
                    <br />
                    maintext maintext maintext maintext maintext maintext maintext maintext maintext
                    <br /><br />

            </div>
            <div id="sidebar">
                side bar
            </div>
        </div>
    </div>
</body>

</html>

html - CSSテーブルの行のセルサイズを次の行のものから切り離す方法は?

3 に答える 3

Related

Reference