

いつもお世話になります。  
css埋め込みのみによる回りこみ制御を考えています。

横幅780px以上の場合、

[code]

    <div style="float: left; width: 50%;">a</div>
    <div style="float: left; width: 50%;">b</div>
    
[/code]

とし、横幅がこれを下回る場合、

[code]

    <div style="float: left; width: 100%;">a</div>
    <div style="float: left; width: 100%;">b</div>
    
[/code]

以上のようなことをmax-width,min-width等の埋め込みのみで制御したいのですが、  
何かいい方法はありませんでしょうか？

こちらではこんな感じで作ってみましたがイマイチです。

[code]

    <div style="float: left; width: 390px; max-width: 100%; height: 200px; background: black;" ></div>
    <div style="float: right; width: 390px; max-width: 100%; height: 200px; background: yellow;"></div>
    <div style="float: left; width: 390px; max-width: 100%; height: 200px; background: red;" ></div>
    <div style="float: right; width: 390px; max-width: 100%; height: 200px; background: gray;"></div>
    
[/code]

基本的に実現したいことは、親要素の横幅780px以上の場合、子要素を２列で表示し、  
親要素の横幅780px未満になる場合は子要素を１列で表示したいです。

埋め込みだけでもできそうな感じはするのですが、  
皆さんのお知恵をお借りしたいと思います。

よろしくお願いします。


CC BY-SA 3.0
2016-09-01T14:28:37.923
28626
2016-09-02T09:59:45.990
2016-09-01T16:12:57.187
8000
9153
question
html css
style属性のみを使い、一定のウィンドウ幅を超えたら2段組みになるようにしたい


`display: flex`の要素を作り、段組みしたい要素をその子要素にするというのはどうでしょうか。  
両方の子要素に`flex: 1 1 390px`と指定すると、`390px`(とりあえず 780/2
で適当に決めました)をベースとして必要に応じて同じ比率で伸縮するようになります。  
親要素に`flex-wrap:
wrap`としているので、ベースの`390px`が保てない幅になったら自動で折り返され縦組になります([Flexbox](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes))。

[code]

    /* 本題と関係ないスタイルはこちらに集めています */
    div{
     border-style: solid;
     border-width: 1px;
     background-color: lightblue;
    }
    #parent{
     width: 100%;
    }
[/code]

[code]

    <div id="parent"><!-- 変更出来ない親要素 -->
                                                                      
     <div style="width: 100%; display: flex; flex-wrap: wrap">
      <div style="flex: 1 1 390px">
       A
      </div>
      <div style="flex: 1 1 390px">
       B
      </div>
     </div>
                                                                      
    </div>
[/code]

* * *

本題とずれますが:  
「親子の相互関係を作ることは可能」な状況でしたら、そこに`style`タグを挿入してしまう事も出来そうですがいかがでしょうか。  
昔のHTMLは`style`タグは`head`内に書かないといけないという仕様でした（現実の実装では無視しても動いたようですが）。  
現在のHTML5では`scoped`属性を付ければ仕様に違反せず挿入出来ます。


CC BY-SA 3.0
2016-09-02T09:59:45.990
28652
2016-09-02T09:59:45.990
3054
28626
answer