css ul позиция в новой строке

Question

мне нужно

на данный момент код вида

Css

ul#content {height:1%;overflow:hidden;list-style:none;margin:0;padding:0;max-width: 1020px;}
    ul#content li{vertical-align:top;display:inline-block;margin:0 2% 26px 0;width:auto;}


    * html ul#content li{display:inline;}
    *+ html ul#content li{display:inline;}

Html

<ul id="content" >
                <li>
                    <div style="height: 420px;width: 740px;" ></div>
                </li>
                <li>

                    <ul>
                        <li>
                            <div style="min-width: 220px;">
                                text
                            </div>
                        </li>
                        <li>
                            <div style="min-width: 220px;">
                                text
                            </div>
                        </li>
                        <li>
                            <div style="min-width: 220px;">
                              text
                            </div>
                        </li>
                    </ul>

                </li>
            </ul>

Answer 1

Может быть, вы хотите просмотреть медиа-запросы css:

http://css -tricks.com / 6731-css-media-запросы /

В этом конкретном руководстве объясняется, как вносить изменения в макет / стили в зависимости от ширины экрана.

В основном это позволяет условно устанавливать стили для элементов, в этом случае вы можете создавать отдельные стили для ul в зависимости от ширины экрана.Поддержка браузеров довольно приличная, и в качестве запасного варианта вы можете предоставить довольно простой js-код для обработки не поддерживающих браузеров.

Answer 2

Я думаю, вам нужно что-то вроде следующего, чтобы оно выглядело как второе изображение ...

html:

<div id="content"></div>
<ul id="contentList">
   <li>Text</li>
   <li>Text</li>
...
</ul>

css:

#content {width:740px; height:420px}
#contentList {margin:10px 0; overflow:hidden}
#contentList li {min-width:220px; float:left; list-style:none}