html - 模造柱を使わずに同じ長さの柱を作る

Question

私は先週 html と css について学んでおり、実際のプロジェクトを始める前にさまざまなことを試しています。

私は少しいじっていましたが、これは私がこれまでに持っているものです: http : //jsfiddle.net/94ZDm/1/

<!doctype html>
<html>
<head>

    <title>My Website</title>

    <meta charset="utf-8" />

    <link href="css/style.css" type="text/css" rel="stylesheet"/>

</head>

<body>

<div class="container">

<div class="nav">
<ul id="navi">
    <li><a href="">Home</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Archives</a></li>
    <li><a href="">Links</a></li>
    <li><a href="">About</a></li>
</ul>
</div>

<div class="main-wrap">
    <div class="main1"> 
    <h1 id="top"> Hello World!!! </h1>

        <p> First paragraph </p>

        <h2> Things I Must Do Today</h2>

            <ul>
                <li> <a href="http://google.be" target="_blank" id="externallink"> Go to the mall </a> </li>
                <li> Shop </li>
                <li> Get gas</li>
                <li> Drive home </li>
            </ul>

        <p><img src="img/koala.jpeg" alt="a koala sitting in a tree" align="left"/>

            Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!</p>

        <p> Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!</p>

        <p> Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!</p>

        <p> Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!</p>

        <p><a href="#top">Top</a></p>
    </div>
    <div class="main2"> 
        <p> extra navigation... </p>
    </div>
</div>

<footer>
    &copy; Copyright Blabla Land 2014
</footer>

</div>

</body>
</html>

.

 * {
-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
      box-sizing: border-box;
}

body {
font-family: Arial, Verdana, sans-serif;
background: green;
}

.container {
width:960px;
margin:0 auto;
}

.main-wrap {
overflow: hidden;
}

.nav {
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

.main1 {
float: left;
width: 652px;
margin-bottom: 10px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

.main2 {
float: right;
width: 288px;
min-height: 1000px;
margin-bottom: 10px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
} 

footer {
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

text-align: center;
}

#navi li {
display: inline-block;
list-style-type: none;
margin-right: 25px;
}

#navi {
text-align: center;
}

a:link {
color: black; 
text-decoration: none;
}

a:visited {
color:black;
}

a:hover {
color: #229944;
text-decoration: underline;
}

a:active {
color:red;
}

#externallink {
text-decoration: underline;
}

img {
padding: 10px;
}

偽の列を使用せずに、コンテンツ列を同じ長さにするにはどうすればよいですか (右の列はメインの列と同じ長さにする必要があります)。偽の列があると、現在のレイアウトを使用できなくなりますか? また、指定された高さを使用したくありません。コンテンツに自動的に適応する必要があります。

前もって感謝します！

score 0 · Accepted Answer

1) 列を同じ長さにするには、コンテナーの幅を各列の幅の 2 倍に変更します。2 列目の幅を 1 列目と同じに設定します。高さを自動的に設定する場合は、指定しないでください。(

#container {
width:1304px;
margin:0 auto;
}

#main2 {
float: right;
width: 652px;
margin-bottom: 10px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

2) クラスと ID の両方が機能しますが、一般的に CSS にはクラスが優先されます。以下のフィドルでは、レイアウトが変更されないようにするためだけに ids に変更しました。

3) 「#navi」はリスト自体を指し、「#navi li」はリスト内の各リスト項目を指します。

フィドルのデモ

score 0 · Accepted Answer

CSS table-cells を使用してそれを行う 1 つの方法を次に示します。

CSS を次のように変更します。

.container {
    width:960px;
    margin:0 auto;
    overflow: hidden;
}
.main-wrap {
    display: table;
    width: 980px; /* Container width + 2 x 10px */
    margin-bottom: 10px;
    border: 1px dotted red;
    border-spacing: 10px 0;
}
.nav {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #efefef;
    border: 2px solid;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}
.main1 {
    display: table-cell;
    width: 652px;
    padding: 10px;
    background-color: #efefef;
    border: 2px solid;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}
.main2 {
    display: table-cell;
    width: 288px;
    padding: 10px;
    background-color: #efefef;
    border: 2px solid;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

に対して.main-wrap、を適用display: tableし、次にdisplay: table-cell2 つの子要素.main1およびに適用します.main2。

デフォルトでは、2 つの子要素は 2 つの高さのうち大きい方にスケーリングされます。

.main1との間の間隔を確保するには.main2、適用border-spacing: 10px 0して各セルの周囲に 10 ピクセルの水平間隔を確保します。これはテーブル全体の幅にも影響するため、2 つのセルは意図したよりもわずかに狭くなります。

これを修正するには、.main-wrap幅を 980px に設定します。つまり、幅に.containerセル間隔 10px の 2 倍を加えた値です。

overflow: hidden結果は、 onを使用して非表示にできるオーバーフロー状態です.container。

最後に、適用margin-left: -10pxしてテーブルのセンタリングを調整します。

margin-bottom: 10px必要に応じて、 onを使用し.main-wrapてメイン要素とフッターの間に余白を空けます。

デモを参照してください: http://jsfiddle.net/audetwebdesign/b8Fy7/

score 0 · Accepted Answer

最も簡単な方法は、私のプラグインを使用することです: https://github.com/Masquerade-Circus/simpleEqualize.js。

プロジェクトに追加して、このように呼び出すだけです。

$(".main-wrap").simpleEqualize(true, 'div');

プロジェクトがレスポンシブである場合は、次のように呼び出すことができます。

$(window).resize(function(){
    $(".main-wrap").simpleEqualize(true, 'div');
});

または、次のような setInterval を使用します。

setInterval(function(){
    $(".main-wrap").simpleEqualize(true, 'div');
},100);

html - 模造柱を使わずに同じ長さの柱を作る

5 に答える 5

Related

Reference