0

私はこれに似たモバイル デバイスの設計に取り組んでいます: http://jsfiddle.net/rdCdx/

次の要件を満たす必要があります。

  • [編集] トップメニューとボトムメニューの間のスペースの高さに合わせて左側の画像を合わせます
  • 左側の画像の縦横比を維持します。
  • divが#products-listの残り#contentの幅を占有するようにします (現在、そこに値をハードコーディングしましたが、これは流動的ではなく、別のデバイスでは機能しません)
  • float を右に持ち、の幅の.buttonパーセンテージ (たとえば 10%) を占めます.product

これはどのように達成できますか？

編集：私が立ち往生している点は、右側の要素、つまり#products-list要素の幅を画面の幅から画像の幅を引いたものに等しくする方法を考えられないことです。

what have you tried?

私が持っている知識を考えると、私の要件に向かって前進するための良い方法は思いつきません。また、私はこのようなことを他のどこでも見たことがありません。

4

1 に答える 1

1

HTMLを使用できます...これにより、縦横比が保持されますが、幅がコンテンツコンテナの50％になるために必要な高さに画像が拡大されます。

<style type="text/css">
    img { width: 50%; float: left; }
    #product-list { width: 50%; float: right; }
    .product { overflow: hidden; }
    .button { width: 10%; float: right; background: red; }
</style>
<div id="content">
    <img src="http://balloonraces.homestead.com/balloon.jpg"/>
    <div id="product-list">
        <div class="product">
            <a class="button">Button</a>
        </div>
    </div>
</div>

または、以下は画像のサイズを保持し、製品リストが残りのスペースを占有します。

<style type="text/css">
    img { width: 200px; float: left; }
    #product-list { margin-left: 200px; }
    .product { overflow: hidden; }
    .button { width: 10%; float: right; background: red; }
</style>

より複雑な動作を指定するには、一方が他方と同じように動作を開始する停止点を決定します。たとえば、後者の例を 2 つの比率が 1:1 になるまで上げ、メディア クエリを使用して縮小します。

<style type="text/css">
    img { width: 200px; float: left; }
    #product-list { margin-left:  200px; }
    .product { overflow: hidden; }
    .button { width: 10%; float: right; background: red; }

    @media screen and (max-width: 400px) {
        img { width: 50%; }
        #product-list { width: 50%; float: right; margin: 0; }
    }
</style>

それよりも複雑なものには、JavaScript が関係する可能性があります。

質問の条件を変更したので編集します。画像を常に高さの 100% にしたい場合、この答えは当てはまりません。代わりに次の CSS を使用してください...

<style type="text/css">
    img { height: 100%; float: left; }
    #product-list { overflow: hidden; }
    .product { overflow: hidden; }
    .button { width: 10%; float: right; background: red; }
</style>
于 2012-10-18T12:36:15.693 に答える