CSSは、残りの領域の％を埋めるために幅を設定します

82

少しごみのタイトルでごめんなさい。私はこれをよりよく説明する方法を考えることができませんでした。

私は自分のサイトにGoogleFriend Connectメンバーガジェットを実装しようとしています（スキームに入ったばかりで、少なくともテストのために、大幅な再設計なしで実装したいと考えています）。

私の問題は次のとおりです。

メインページ（本体）の90％の幅を持つコンテナdivがあります。この中に、divを右に浮かせ、その幅を300pxに設定し、その中にgoogleガジェットを配置しています。私が欲しいのは、Googleガジェットのdivの左側に残っているスペースの95％をdivで埋められるようにすることです。

pxと％をdivとwidthsと混在させることができるかどうかはわかりません。

これが理にかなっていることを願っています。

ありがとう

css

— ジョン
ソース

関連するstackoverflow.com/questions/4873832/…–

— Adrien Be

70

です。あなたは半流動的なレイアウトを探しています。クエストはもともとCSS実装の聖杯でした...しかし、そのリンクからわかるように（3列、2修正済みですが、簡単に変更できます）、長い間解決された問題です=）

— オリ
ソース

完璧に見えます。ありがとうございました。私は週末にこれをいじるつもりです。

— ジョン

44

このような記事は、CSSがレイアウトに適したツールとはほど遠いという私の恐れを再確認しています。

— s4y 2011年

11

@Sidniciousこれを[デザインをウェブサイトに変換する]私のパンとバターの仕事としてやっている人として、これまでに提案された、または提案された他の何よりもはるかに優れていると言えます。それは完璧ではなく、それがどのように機能するかを知る必要があります...しかし、一度やれば、それは簡単です。

— オリ2011年

ただし、列の幅を変更する場合は、すべての場所で値を編集する必要があります。「うまくいったら絶対に触れないで、批判しないでください」という煩わしい考えがありますが、レイアウトははるかに簡単かもしれません。％とpxを混ぜて他の値を参照すると、すべてがはるかに簡単になります。

— ジョナサン。

1

@ジョナサン。これが真実であることは間違いありません-CSSのライブ変数と算術演算は物事を非常に簡単にしますが、私たちはそれを持っていません。可塑性を分解したい場合は、LESS / SASS / etcを見てください。それらは解決策の半分です。

— オリ2013年

0

私は、あちこちでいくつかの潜在的な解決策を検討した後、簡単な実験も行いました。私がやろうとしていたのは、流動的な行と列を組み合わせることでした。

これは私が最終的に得たものです：

http://jsbin.com/hapelawake

— アンソニー・タンブリン
ソース

0

フロートやクリアフィックスを避けたい場合は、フレックスレイアウトを使用してください。

.main {
  display: flex;
  width: 90%;
}
.col1 {
  flex-grow: 1;
}
.col2 {
  width: 300px;
  margin-left: 5%;
}

<div class="main">
  <div class="col1" style="background: #518cf3;">Left column</div>
  <div class="col2" style="background: #94d0bb;">Right column</div>
</div>

スニペットを展開

注：サポートされているブラウザで必要な場合は、フレックスベンダープレフィックスを追加してください。

— レジーピンクハム
ソース

-1

レスポンシブビルドごとに、残りのスペースをチェックし、「remainder」要素の幅を動的に設定するjQueryまたはJSを使用してアルゴリズムを作成する必要があります。ビルドが応答しない場合は、簡単な数学的計算を実行して要素の幅をテストおよび設定できます。

液体レスポンシブグリッドベースのメディアシステムを構築しているときに、同様の問題が発生しました。

— BasisInteractive
ソース