問題タブ [fluid-layout]

Photoshop でボタンを作成し、それらを 3 つの画像に分割しました。今、私はそれらの画像をAndroidボタンに入れたいと思っています。Androidでレイアウトを作成する方法は知っていますが、欠けている点は、それらを流動的にする方法です?

そのため、3つの画像があるボタンがあります。

<Button>これらの画像をタグに使用して、中央の画像を繰り返し展開する方法を尋ねたいと思います。ここでスタイルを作成してから配置する必要がbackground="@drawable/three_button_style"ありますか、それとも本当に知っておくべきことがありますか?

ListView についても同じことが言えますか? 上、中、下のリストビューと画像を取得したので、中央の画像を繰り返す 3 つの画像の ListView を作成できますか?

流動的なグリッドレイアウトを作成しようとしていますが、Operaでの幅のレンダリングに一貫性がないという問題が発生しました。Operaでは、要素の幅は他のブラウザよりも一貫して小さくなっています。流動的な960グリッドシステムを試していますが、一貫性がない場合は、固定サイズに変更する可能性があります。

Operaに他のブラウザと同じ幅をレンダリングさせる方法を知っている人はいますか？

これが私がこのデモに使用しているCSSとHTMLです

最初の流体グリッドレイアウトに問題があります。このレイアウトは、ほとんどのブラウザでずれている（幅が変化している）ように見えます。これはFirefoxでのみ機能します（たとえば、ChromeやOperaでは機能しません）理由はわかりません。

ありがとう

私はこのフォームを手に入れました...

このCSSで…</p>

入力要素の幅が常にフィールドセット要素の幅に比例するように、入力フィールドを流動的にする簡単な方法を探しています。つまり、ラベル（125px）と入力要素の幅は、常にフィールドセット要素の幅の100％である必要があります。（divを追加せずに）これを行う簡単な方法はありますか？

私の理解によると、tablerow クラスで指定した各行に黒い境界線を描画する必要があります。しかし、国境は出てきません。

そして、行の高さを変更したかったのです。「px」で指定すると動作します。しかし、 % -- を指定すると機能しません。次のことを試しました

どこかで何かがおかしくなっているのですが、どこか理解できません。助けてください！

更新と要約

賞金が付いているので、この質問をより明確にする義務があると感じています。

（また、 CSS3ユニット値がサポートされている場合、これは子供の遊びになると確信しています。たとえば、その時点でインターネットを閲覧していると思いますがcalc()width: calc(25% - 5px)）

私は、設計要件を共有するいくつかのプロジェクトのCSSフレームワークに取り組んでいます。つまり、流動的な12列のレイアウトです。パーセント幅のフロート.column要素を使用すると(100% / 12) x col_size、これはかなり簡単です。ただし、この問題には、列間に固定マージン（または任意の形式の間隔）が追加されることがあります。

私の最初の試みでは、説明したように流体カラムを使用し、.panelそれぞれに子をネストしました。HTML / CSSスニペットは次のとおりです（簡潔にするために縮小）：

このスニペットは、下の画像のようなレイアウトを生成しますが、すべての.panel要素5pxのすべての側面にパディングがあります。外側の列のコンテンツエッジをビューポート（またはその場合は親コンテナ）のエッジと同じ高さにしようとしています。もう1つのアプローチは、.panelクラスを完全に削除し、列を使用することです。

繰り返しになりますが、これはうまく機能し、下の画像の結果にさらに近い結果を生成しますが、（実際の）問題は、パディングが列の幅に食い込み、幅の分布を台無しにしていることです。:first-child列のコンテンツ領域の幅は、兄弟よりも10ピクセル（またはマージンサイズが何であれ）大きくなっています。

これは無害に見えるかもしれませんが、気付かないかもしれません。ただし、要素間に正確な（可能な限り正確な）幅の分布を設定する必要がある場合や、作業を完全に簡単にする場合がいくつかあります。

したがって、パディング、マージン、またはそれらの組み合わせを使用するかどうか。隣接するカラムから「マージナル」（*** haha​​ *）コンテンツ領域を奪わないガタースペースの均等な分散を備えた、流体カラム、固定マージンのソリューションはありますか？**

元の質問

検索と試行の結果が単純に不足しているため、これは不可能であると結論付けました。しかし、どこかで答えが得られるのであれば、それはここにあると確信しています。

純粋なCSSを使用して、固定幅のマージンを持つ流動的な幅の列レイアウトを実現する方法はありますか？

重要な注意：この図は単なる例であり、私が達成しようとしている特定のレイアウトではありません。与えられたソリューションは、隣接する列の任意の組み合わせを許可する必要があり、合計幅分布は合計12以下です。参照用に人気のある960グリッドを検討してください。）

注：12列のレイアウトでは、画像の列の幅の分布はそれぞれ2、3、2、および5です。

これまでのところ、パーセンテージを使用してほぼこれを達成するグリッドに頼ってきました。問題は、マージンを達成するために、各列に次の子（私はそれらと呼びます.panel）を追加する必要があることです。

これもほぼ問題ありません。このアプローチの問題は、最初と最後の列に外側の「マージン」（10px）があり、各列間の「マージン」が2倍になることです（2 x 10px）

確かに、新しいCSS3calc()値型を含めることで、これははるかに簡単に解決できます。次の方向への何か：

私はいくつかのJavascriptの修正を持っています、私は「うまくいく」いくつかのものをハックアウトしました、しかし私は探求中です。うまくいけば、最も神聖なグレイルが存在します。

残念ながら、次の解決策と@avallが提供する解決策（単純化には確かに良い選択ですが）は、私が探しているものではありません。主な問題は、マージンが列間で均等に分散されていないことです。

.panelこれが機能していることを確認できる唯一の方法は、パディングを5px次のように減らすことです。

:last-childIE8が（さらに言えば:only-child）疑似セレクターを認識できないという理由だけで、このソリューションは受け入れられません。

通常、ほとんどの DIV ベースのレイアウトでは、ページ (外側のスケルトン) を次のようにコーディングします。

以下は私が使用する CSS です。

ここで、私は UI 開発に関心があり (レイアウト設計にはあまり関心がないため)、これらの div の一部が実際に使用されている「理由」を正確に理解していないことを認めなければなりません。私の推測では、これらの div の一部は、古い IE の最小幅サポートの欠如に対する一種のハックとして使用されています。

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

1. 上記のレイアウト コードが標準であり、ブラウザ間の互換性のために必要かどうかを教えてください (特定の最小幅の要件も想定しています)。
2. 古い IE では min-width をサポートするためだけに非常に多くの div が必要だったと思いますか? 最新の IE (IE8/9 など) は min-width を完全にサポートしていますか?
3. 流動的なレイアウト、つまり複数のプラットフォーム (iPad などのデスクトップ/タブレット、およびある程度のモバイル デバイス) でシームレスに動作するレイアウトを設計したいと考えています。
4. 画面の解像度（デスクトップ/タブレットなど）に応じて適切に調整される流動的なレイアウトを確保するために、他の骨格構造を提案してください。

アルファベット順で動的に増加する大規模なリストが与えられた場合、それらすべてを 3 列にリストしたいと考えています。例えば：

CSS で、各見出しの項目数がわからないこのようなリストに同じ高さの列を 3 つ持つ方法はありますか?

各列にいくつあるべきかなどを計算する方法をプログラムする必要がない流動的な列表示。

助けてくれてありがとう！

私は流動的なレイアウトを設計しており、レイアウトをコーディングするための正しいアプローチを考えています..以下は私が考えている構造です;

CSSについては、コンテナを {width:90%;margin:0 auto;overflow:hidden} としてコーディングすることを考えています

2 つの列の場合、いくつかの % 幅で左にフロートされます。

ご覧のとおり、流動的なレイアウトが必要なので、px 値をどこにも使用していません。

私の他の要件は次のとおりです。

1 ビューポートに基づいて自動的に調整する必要があります。たとえば、同じ html ページをデスクトップまたは iPad (ある程度携帯電話) で表示すると、ビューポートに比例して調整する必要があります。

2 ほとんどのデスクトップ ブラウザと iPad で互換性があり、将来的には他のタブレット向けに簡単に拡張できる必要があります。

3 ページは中央揃えで表示されます (iPad に十分なスペースがあるかどうかはわかりません)。

上記の構造または css が原因であると思われる問題を指摘してください。

私の HTML と CSS コード (特にコンテナ) が正しくコーディングされているかどうかを提案してください..同じことがほぼ 500 以上の html に適用されるため、これを正しく行うことについて少し不安です...だから取得したくない後の段階であらゆる種類の主要な問題に..

できるだけ多くのアイデアを提案してください..私はそれらすべてを受け入れます..

ありがとうございました..

流動的なデザインを実装する方法は 2 つあります (表示される画面のサイズに合わせて調整する方法)。

アプローチ 1: 利用可能なブラウザーのサイズ (またはビューポートの幅/高さ) を使用して、それに応じて CSS を定義することができます.... これは、CSS @media max-width:320px を使用することと同じです。非常に小さいサイズに圧縮されていると、モバイル デバイスと同じデザインが表示されます。

アプローチ 2: 表示されるデバイス (デスクトップ/モバイル/タブレット) に基づいて CSS を設計します。これは、CSS @media min-device-width:768px を使用するのと同じです。

ご覧のとおり、「幅」または「デバイス幅」のいずれかに基づいて適用する CSS を識別する方法に違いがあります。

私の質問は、メディアクエリとそれらを適用する方法に関するものではありません..

私の質問は、2 つの設計アプローチのうち、どちらを優先するべきかということです。デバイス用に設計する必要がありますか、それとも利用可能なブラウザ領域用に設計する必要がありますか?