特定のパターンで異なるサイズのDIVを配置します -- html フィールド と css フィールド と wordpress フィールド と responsive-design フィールド と responsive フィールド 関連 問題

Arrange different sized divs in a certain pattern












1
vote

問題

日本語

"POST" -BOXに焦点を当ててこの。 あなたが見ることができるように、3つの異なる種類 - 大型、中、小さいもの。
作成したい規則は次のとおりです。

1)「大きい」幅の100%がかかります。
2)「媒体」は幅の約60%がかかり、常に左側に表示されます。
3)「小さい」とは幅の約40%(余白を考慮して)は常に左側に表示されます
4.)スクリーンサイズが閾値(例えば800px)を下回る場合、全ての3は互いに100%以下で表示されるべきである。

これは私が今までに得たものです

 <コード> .container {    display: flex;    flex-direction: row;    flex-wrap: wrap;  }    .container div {    padding: 20px;    border: 1px solid black;    margin: 10px;   }    .large, .medium, .small {    box-shadow: 1px 1px 12px black;  }    .large {    width: 100%;  }    .medium {    min-width: 60%;    flex: 1 1 0  }    .small {    flex: 1 1 0;    min-width: 20%;  }  
 <コード> <div class="container">     <div class="large">Div 1</div>      <div class="medium">Div 2</div>      <div class="small">Div 3</div>          <div class="medium">Div 2</div>      <div class="small">Div 3</div>    </div>  

問題は、DIVを動的に追加します(WordPress)。だから私がこのパターンを維持したいのであれば、私は "小さい" divの直前、そしてそれから "Medium" divの直前に "中程度" divを作成することを注意してください。毎回他の後に2つの「小さい」DIVを追加した場合、それはうまくいきません。
他の問題は、同じ行内の2つのDIVの高さが互いに依存していることである。例えば。テキストの束を「DIV 3」に入れて「DIV 2」に1文だけに入れると、それらは同じ高さになります。

だから私の質問は、私のデザインスケッチのようなものを作り出すために(好ましくはJSなしで)より良い方法があるのですか?

英語

I want to create a Layout like this with focus on the "Post"-boxes. As you can see, there´re three different kind - a large, a medium and a small one.
The rules I want to create are:

1.) "Large" takes 100% of the width.
2.) "Medium" takes around 60% of the width, is always displayed on the left side
3.) "Small" takes around 40% (considering a margin) of the width, is always displayed on the left side
4.) If the screen size is below a threshold (e.g. 800px) or on mobile, all 3 should be displayed with 100% and below each other.

This is what I got so far

.container {    display: flex;    flex-direction: row;    flex-wrap: wrap;  }    .container div {    padding: 20px;    border: 1px solid black;    margin: 10px;   }    .large, .medium, .small {    box-shadow: 1px 1px 12px black;  }    .large {    width: 100%;  }    .medium {    min-width: 60%;    flex: 1 1 0  }    .small {    flex: 1 1 0;    min-width: 20%;  }
<div class="container">     <div class="large">Div 1</div>      <div class="medium">Div 2</div>      <div class="small">Div 3</div>          <div class="medium">Div 2</div>      <div class="small">Div 3</div>    </div>

Problem is, the divs are dynamically added (Wordpress). So if I want to keep this pattern, I´ve to pay attention that I create a "medium" div, right before a "small" div, and then a "medium" div again. If I add two "small" divs right after eacht other, it doesn´t work.
Another problem is, that the height of two divs in the same row are depending from each other. E.g. if I put a bunch of text into "Div 3" and only one sentence into "Div 2", they will be both the same height.

So my question is, is there a better way (preferably without JS) to produce something like my design sketches?

</div
              
         
         

回答リスト


関連する質問

0  応答レイアウトのペアによるテーブル内の積み重ねセル  ( Stacking cells in a table by pairs in responsive layout ) 
多くの例は、セルを1つ上に1つずつスタックする方法を示しています(ただディスプレイを適用するだけで十分です:すべてのセルにブロック)。細胞にペアで積み重ねたいのであればどうなりますか?私は4つのセルを持つ行があるとしましょう: A B C D とレスポンシ...

0  ローカルにアクセスしたときにモバイルビューを正しく表示するWebサイトは正しく表示されますが、サーバーにアクセスしたときに正しくない  ( Website displaying mobile view correctly when accessed locally but incorrect wh ) 
サーバを介してアクセスすると、Webページは移動ビューを正しく表示されていません。しかし私のPCでローカルにアクセスすることはOKです。 今までに少なくとも3日間これを解決しようとしています...:| ローカルには、ページのサイズ変更時に、 De...

0  Bootstrap CSSの背景ポジションモバイルデバイスで動作していません  ( Bootstrap css background position not working on mobile devices ) 
私の最初の質問に私と一緒にベアリングをありがとう。私は行くようにブートストラップを学んでいます(私は学習コードであるデザイナーです)、たくさんの試行錯誤がありますが、私はそれを愛しています。だからここに契約があります: 私は私の会社のウェブサイトを再設計し、モ...

-1  Bootstrapのロゴ付きナビゲーションバー  ( Nav bar with logo in bootstrap ) 
ブートストラップに新しい。私はブートストラップの助けを借りて対応するページを開発しています。私はロゴ(左位置)とNAV BAR(POSIST RIGHT)を持つISSUSESに直面しています。 私の問題は次のとおりです。 1.より低いデバイス幅トグルボタンが...

-3  応答メニューを作成します  ( Creating a responsive menu ) 
誰かが助けをすることができることを願っています。私は対応するシンプルなメニューを作成しようとしています。ここに次のコードがあります <事前> <コード> <nav class="menu"> <ul class="active"> <li class=...

0  Responsive Web Design:ウィンドウブラウザの再サイジング時にヘッダイメージを完全に応答する方法を取得する方法  ( Responsive web design how to get header image to be fully responsive when re si ) 
メディアクエリを使用してヘッダイメージをその下のコンテナのDIVに適切に合わせます。ただし、大きなデスクトップやモバイルモードでは素晴らしく見えますが、他のサイズとブラウザウィンドウを変更すると表示されます。メディアクエリにもっとブレークポイントとより具体的な...

0  HTMLバックグラウンドビデオは、レスポンシブのスクリーンサイズに調整します  ( Html background video adjust to screen size that is responsive ) 
私のHTMLの背景ビデオに関して問題があります。 私はスタックオーバーフロー上のいくつかの記事を見つけ、それを私のHTMLとCSSに追加しました。 しかし、それはうまくいかないようには思われません、それは私の他のdivと要素を使ってめちゃくちゃになりません。 ...

0  モバイルとデスクトップで同じ機能が異なる動作をします  ( Can same function behave differently in mobile and desktop ) 
私はウェブサイトie <a href="http://www.kia.com/us/en/dealers/locator" rel="nofoll/jp </a>あなたがPinCodeとSearchを与える場合、リストが記載されています。リストをクリックすると...

1  私のブートストラップイメージのサイズを変更するには?  ( How to change the size on my bootstrapped image ) 
ねえみんな私はウェブサイトに取り組んでいますが、私の持続可能性のヘッダーの下のイメージに気づいたので、ブラウザの全幅に合うようにサイズを変更しようとしていますが、それは証明されています。どんな解決策がありますか? <事前> <コード> <div class="...

0  スクリーン幅に固定幅のレイアウトを自動フィットする  ( Auto fit fixed width layout to screen width ) 
私は固定幅のレイアウトのウェブサイトを持っていて、簡単に変更できません。その幅は約1300pxですので、小さい画面にはよくレンダリングされません。 私は、ウェブサイトを小さな画面でもよさせるための解決策を探しています。ユーザーがブラウザのズームレベルを75%の...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有