HTML таблица в CSS

Question

Я пытаюсь воссоздать этот вид макета:

Вот код, который я сейчас использую для этого:

<table style="border:0px;">
    <tbody>
        <tr style="border:0px;">
            <td><img src="twophones.jpg" alt="" /></td>
            <td>
                <table style="border:0px;">
                    <tbody>
                        <tr width="100%" style="border:0px;">
                            <td width="100%">

                                <center>
                                    <h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
                                    <br>
                                    <h33>Coming soon to the App Store and Google Play.</h33>

                                    <table style="border:0px; width:410px;">
                                        <tr style="border:0px;"><td style="border:0px;"><img src="dot.png"></td></tr>
                                        <tr style="border:0px;" width="410">
                                            <td style="border:0px;"><a href="#"><img src="app.jpg" alt="" /></a></td>
                                            <td><a href="#"><img src="android.jpg" alt="" /></a></td>
                                        </tr>
                                    </table>
                                </center>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

К сожалению, я устал от поддержания этого стола. Как я могу сохранить тот же макет, но используя стандартные методы CSS?

Вот пара моих попыток:

<div id="parent">       <div id="viewport">
        <a href="#">
<img src="twophones.jpg" style="float:left;>        <img src="twophones.jpg" alt="" />
<h11 style="width:100%;float:right; display: table-cell; vertical-align: middle;">DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<span><h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11><br>
<h33>Coming soon to the App Store and Google Play.</h33>
<br>         
<h33 style="width:100%;float:right; display: table-cell; vertical-align: middle;">Coming soon to the App Store and Google Play.</h33>        
        </span>
        </a>
</div>      </div>

<div id="parent">       <div id="parent">
<img src="twophones.jpg" style="float:left;">       <img src="twophones.jpg"     style="float:left;>
<div style="width:65%;float:right;">        <div style="width:65%;float:right;">
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br>        <br>
<h33>Coming soon to the App Store and Google Play.</h33>
<h33>Coming soon to the App Store and Google Play.</h33>
</div>      </div>

Answer 1

Первое, что вы хотите сделать, когда создаете макет с помощью CSS, это не касаться CSS и иметь дело только с контентом. Как лучше всего представить этот контент? Я думаю, что это включает в себя весь контент довольно семантически:

<section>
    <img src="twophones.jpg" alt="">
    <h2>Discover the brands and styles designed for you</h2>
    <p>Coming soon to the App Store and Google Play</p>
    <ul>
        <li class="iphone">
            <a href="#">
                Available on the
                <strong>App Store</strong>
            </a>
        </li>
        <li class="android">
            <a href="#">
                Available on the
                <strong>Android Market</strong>
            </a>
        </li>
    </ul>
</section>

Он содержит весь контент, но выглядит не очень хорошо. Это выглядит примерно так:

(изображение двух телефонов)

Откройте для себя бренды и стили, разработанные для вас

Скоро в App Store и Google Play

• Доступно в App Store
• Доступно на Android Маркете

Ваш макет не совсем так выглядит. Первая большая разница в том, что здесь ничто не центрировано, но это легко исправить: ( посмотрите)

section {
    text-align: center;
}

А что насчет этих кнопок? Ну, каждая из них функционирует как блочная часть страницы, но мы все еще хотим, чтобы она была встроенной, поэтому мы применим display из inline-block, Кроме того, мы хотим, чтобы жирная часть была на другой линии, поэтому мы установим ее display в block, что должно заставить это. Наконец, на данный момент мы знаем, что у него оранжевый фон и граница, и похоже, что у него есть небольшая тень на тексте, так что соберите все это вместе:

section li a {
    display: inline-block;
    background: orange;  /* fallback for browsers that
                            don't support gradients */
    background: linear-gradient(#f9a60d, #f37111);
    color: white;
    text-shadow: 0 0 -1px 0 black;
    border: 1px solid #e79d48;
    border-top-color: #ffe37d;
    border-radius: 5px;
    box-shadow: 0 5px 0 #a95511;
    padding: 8px;
    text-decoration: none;  /* no underlines on our link, please */
    text-align: left;  /* within the button, left-aligned */
}
section li a strong {
    display: block;
}

Хорошие кнопки! Но мы могли бы использовать некоторые значки на них - к счастью, это просто: просто добавьте немного больше отступов слева и примените фоновое изображение: ( попробуйте)

section li a {
    padding-left: 50px;
}
section li.iphone a {
    background: orange url(iphone-icon.png) no-repeat 10px 10px;
    background: linear-gradient(#f9a60d, #f37111), url(iphone-icon.png) no-repeat 10px 10px;
}
/* similar for Android */

Теперь, как вы получаете кнопки, чтобы появиться в строке? К счастью, все просто. Сначала удалите все поля и отступы в списке, затем сделайте каждый элемент inline-block ( попробуйте)

section ul {
    margin: 0;
    padding: 0;
}
section li {
    display: inline-block;
}

Теперь как насчет этого изображения на стороне? Оказывается, CSS нас охватил. Мы просто говорим, что хотим плавать влево. Как обычный трюк, мы также установим overflow: hidden на контейнере, так что поплавок полностью содержится внутри контейнера. (Вы не можете видеть его изолированным, но вы можете увидеть эффект, если попытаетесь встроить его в большую веб-страницу.)

section {
    overflow: hidden;
}
section img {
    float: left;
}

Попробуй это. Затем у нас есть только одна небольшая визуальная настройка: мы хотим, чтобы заголовок был в верхнем регистре. К счастью, CSS тоже нас там охватил! Просто подать заявку

section h2 {
    text-transform: uppercase;
}

И мы сделали. Конечно, вы можете сделать больше: отрегулировать поля и / или отступы, чтобы изменить интервал; при необходимости измените шрифт и т. д., но я рассмотрел несколько общепринятых методов:

• Поплавки все время используются и используются в CSS. Они полезны.
• изменения display может быть полезно для принудительного отображения элементов в строке или вне ее.
• Играть с background Можно ставить значки на вещи.

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

Answer 2

Я не думаю, что смогу углубиться в подробности или объяснить что-либо лучше, чем фантастический ответ от icktoofay, но вот простая схема, которая также может помочь вам начать.

Вот демо.

Давайте начнем с основного макета HTML:

<div class="wrap">
    <div class="image">
        <img src="http://www.placehold.it/400X500" />
    </div>

    <div class="information">
        <h1>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h1>

        <h2>Coming soon to the App Store and Google Play.</h2>

        <a class="storeLinks">Play store</a>

        <a class="storeLinks">APP store</a>
    </div>
</div>

Теперь давайте добавим немного CSS для размещения элементов HTML. В этом примере:

1. display: table-cell; может быть использован для вертикального выравнивания нашего контента в сочетании с vertical-align: middle; и поместите наше изображение слева от текста.

2. html,body { height: 100%; } позволяет нам дать нашу упаковку .wrapdiv высота 100%, так что весь контент, содержащийся в <div class="wrap"> может быть вертикально по центру.

3. .wrap > div будет нацелен только на divс, которые непосредственно после <div class="wrap">,

4. margin: 0 auto;вместе с фиксированной шириной сохраняйте весь наш контент горизонтально по центру.

* {
    margin: 0;
    padding: 0;
}    
html,body {
    height: 100%;
}    
.wrap {
    display: table;
    height: 100%;
    width: 900px;
    margin: 0 auto;
}    
.wrap > div {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}    
.image {
    width: 400px;
}
.information {
    width: 500px;
    text-align: center;
}
h1 {
    text-align: center;
    padding: 10px;
    margin: 10px;
}
h2 {
    padding: 10px;
    margin: 10px;
}
.storeLinks {
    display: inline-block;
    padding: 20px;
    background: #DDD;
    padding: 10px;
}