4

私はすでにゴーグルをしていますが、まだ何をすべきかわかりません

私は3つのdivを持っています

<body>
    <div id="container">
        <div id="center"> <h1>center</h1> </div>
        <div id="right"> <h1>right</h1> </div>
    </div>
</body>

私が達成しようとしていること

  • div id=center は幅を自動で埋める
  • div id=right は div id=center, width=200px の右側にあります。

私がこれまでに試したこと

#center{
    background-color: green;
        float: left;
        overflow: auto;
}

#right{
    background-color: red;
        float: right;
        width: 200px;
}

div id=center で幅全体を別の div (div id=right) の右側の位置で埋める方法

jsfiddle

私の英語を許して

4

5 に答える 5

5

純粋な CSS ソリューションが必要な場合は、DOM の変更を検討してください

デモ

まず、float: left;からプロパティを削除し、列を独立させるプロパティを#center追加width: auto;しました。overflow: hidden;

参照コード ：

<div id="container">
    <div id="right"></div>
    <div id="center"></div>
</div>

#container {
    height: auto;
    overflow: hidden;
}

#center {
    background-color: green;
    width: auto;
    height: 20px;
    overflow: hidden;
}

#right {
    background-color: red;
    float: right;
    height: 20px;
    width: 200px;
}
于 2013-10-26T03:22:57.260 に答える
4

そのようには機能しません。「中央」の div 内に「右」の div をネストする必要があります。

<body>
  <div id="container">
    <div id="center">
      <h1>center</h1> 
      <div id="right">
        <h1>right</h1> 
      </div>
    </div>
  </div>
</body>

次に、h1表示をインラインにします。

h1 {
  display: inline-block;
}
#center {
  background-color: green;
  float: left;
  width: 100%;
}
#right {
  background-color: red;
  float: right;
  width: 200px;
}

これが更新されたフィドルです。

于 2013-10-26T03:25:27.590 に答える
2

ここからこれを入手し、新しい/便利なものを学びました。

次の解決策は、変更を加える際にdomに影響を与えません。

#center{
    background-color: green;
    float: left;
    width: -moz-calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
    width: calc(100% - 200px);
}

デモ

于 2013-10-26T04:32:19.317 に答える
2

もう一方が将来誰かに役立つ可能性があるため、これを個別に追加します。これが私が思いつく唯一の CSS のみのソリューションですが、注意点があります。両方の div でパーセンテージ ベースの幅を使用する必要があります。

#center {
  background-color: green;
  display: inline-block;
  float: left;
  width: 80%;
}

#right {
  background-color: red;
  float: left;
  width: 20%;
}

20% は、小さな div で必要なものに近いはずです。必要に応じてメディア クエリを使用して、大きな画面で幅が広すぎないようにすることができます。

これが更新されたフィドルです。

于 2013-10-26T03:46:30.627 に答える
1

私にできることは、CSSをカスタマイズすることです:

#center{
    background-color: green;
    position : absolute;
    width : 100%;
    z-index : -1;
}

#centerと の間のすべての空きスペースを埋めます#right。しかし、あなたはそれが背後にある
ことに注意する必要があります#center#right

于 2013-10-26T03:25:35.490 に答える