Попытка добиться форматирования с помощью просто divs & css вместо таблиц

Question

Попытка добиться форматирования с помощью просто divs & css вместо таблиц

0

Есть ли способ, которым я могу достичь положения и форматирования этого iframe с помощью только css и divs вместо таблицы, которую я использую? Я устал от использования 3 отдельных div и применял css к ним и мог лишь частично достичь этого формата, однако нижняя часть iframe переполнилась бы, и было невозможно просмотреть нижнее содержимое страницы.

    <style>
      body {
        margin:0;
        background-color:#efefef;
      }
      .frame{
        width:100%;
        height:100%;
        margin:0px;
        border-spacing:0;
        border-collapse:collapse;
        overflow:hidden;
      }
      .frame_leftspace{
         width:250px;
      }
      .frame_topspace{
        height:70px;
      }
    </style>

    <table class="frame" width="100%">
        <tr>
            <td class="frame_topspace" colspan="2"></td>
        </tr>
        <tr>
            <td class="frame_leftspace"></td>
            <td>
            <iframe style="width:100%; height:100%;" src="http://www.reddit.com/" frameborder="0"></iframe>
            </td>
        </tr>
    </table>

Ben Pelletier 11 нояб. 2013, в 03:47

Источник

1

В чем твоя проблема здесь? jsbin.com/eZoNoNe/1/edit
Roko C. Buljan 11 нояб. 2013, в 02:19
0

id предпочитают не использовать таблицы для достижения этого форматирования
Ben Pelletier 11 нояб. 2013, в 02:57

Теги:

html

css

iframe

formatting

1 ответ

Ещё вопросы

В чем твоя проблема здесь? jsbin.com/eZoNoNe/1/edit
id предпочитают не использовать таблицы для достижения этого форматирования

Heretic Monkey · Answer 1 · 2013-11-11T01-58-00.000Z

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

HTML:

<div class="topspace"></div>
<div class="iframe">
    <iframe id="reddit" src="http://www.reddit.com/" frameborder="0"></iframe>
</div>

CSS:

.topspace { height: 70px; }
.iframe { padding-left: 250px; }
#reddit { height: 100%; width: 100%; }

Надеюсь, это поможет.