0

私が構築したこのレイアウトを見てくださいdivs：

ここに画像の説明を入力してください

まず第一に、あなたはHeaderセクションを無視することができます

したがってContent、正確に中央に配置する必要があり、幅は固定されているので簡単ですがLeft Column、左側から到達するまで延長する必要がContentあります。これは難しい部分です。ギャップはどのような長さでもかまいませんLeft Column。設定します。Contentwidth

今ではこれを行うのはかなり簡単だとわかっていますがjavascript、可能であればそれを避けたいと思います。

ここで要求された編集はコードです：

<div class="left_column"></div>
<div class="content"></div>

.left_column{
   width:100px;
   height:100px;
   float:left;
}

.content{
   width:100px;
   height:100px;
   margin:auto;
   position:relative;
}
4

4 に答える 4

1

オブジェクト指向のCSSを見てください 。特に、彼らのグリッドページをチェックしてください

于 2012-09-25T19:12:30.600 に答える
0

私はパーセンテージを使用しますが、あなたがすべきところより1％不足しています。ブラウザがピクセルなどを「切り上げる」ことがよくあるので、パーセンテージの合計が100％の場合、追加するとdivが下にプッシュされます。

たとえば、右側と左側の2つのdivが必要な場合は、一方を持ってwidth:49%;、もう一方を持っていwidth:50%;ます。

于 2012-09-25T18:42:23.503 に答える
0

パーセンテージを試しましたか？

overflow: auto;
 padding: 10px;
 width: 45%;

float left float rightを試してみて、インラインで表示してください。widthautoも試してみてください。ただし、うまく機能しません。

float:left;
 width:auto;
    height: auto;
    display: inline;

メニューで使用されるもう1つのトリックもあります

    <div id="mail_menu">
     <ul>
     <li><a href=something</a></li>
    </ul>
</div>

css

#mail_menu {
 position: relative;
 top: 0px;
 left: 0px; /* LTR */
 z-index: 3;
 color: #000;
}
#mail_menu ul {
 list-style-type: none;
}
#mail_menu li {
 display: inline;
 float:left;
 margin: 0px;
 padding: 3px;
}
#mail_menu a {
 color: #000;
 background: #FFF;
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 margin: 1px;
 border-color:#CCC;
 border-width:1px 0;
 padding: 2px;
 float:left;
 border-width:1px;
  border-style:solid;
  border-bottom-color:#aaa;
  border-right-color:#aaa;
  border-top-color:#ddd;
  border-left-color:#ddd;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;



}
#mail_menu a:hover {
 color: #0000DD;
 text-decoration: none;
 background-image: url(/images/lyel.png);
 background-repeat: repeat-x;
}

何かを真ん中にするcss

.middle {
 display: block;
 width: 50em;

 margin-left: auto;
 margin-right: auto
}

そして最後に、混乱させるために表示するためのいくつかのテーブル値

.td {
display: table-cell;
display:inline
}

.wrap{
 position: inherit;
}

.tr {
display: table-row;
display:inline
}

table {
  border-collapse: collapse;
}
th {
  text-align: left; /* LTR */
  padding-right: 1em; /* LTR */
  border-bottom: 3px solid #ccc;
}
于 2012-09-25T18:28:32.163 に答える
0

これは、このハックを使用して実行できます。これを試してください。

div.header { height: 50px; line-height: 50px; background-color: #222; color: #eee; }
div.wrapper { background-color: #b261da;position: relative;z-index: 0; }
div.wrapper div.content { width: 600px;margin: 0 auto; background-color: #6189fe; color: #fefefe; }
div.wrapper div.left-column { background-color: #00fe72; position: relative;width: 550px;float: left;z-index: -1000; }

このマークアップで：

<div class="header">Header</div>
<div class="wrapper">
    <div class="left-column">Left Column</div>
    <div class="content">Content</div>
</div>

left-column画面のサイズを変更しすぎると、がカットされることに注意してください。いずれにせよ、それがお役に立てば幸いです。

于 2012-09-25T19:00:33.347 に答える