Стол рядом с плавающим изображением - PullRequest
Новая
       0

Стол рядом с плавающим изображением

1 голос
/ 10 мая 2011

Я пытаюсь сделать что-то, что мне показалось бы простым, но кажется, что когда дело доходит до CSS, вы никогда не знаете!

У меня есть изображение с плавающей точкой слева. Кроме того, у меня есть заголовок и под этим заголовком, но все же помимо изображения я хочу отобразить таблицу, в которой будет вся оставшаяся ширина. В IE и Chrome таблица оказывается под моим изображением, а в Firefox она занимает более 100% (отображается горизонтальная полоса прокрутки). Firefox дает результат ближе к тому, что я хочу, но я не хочу полосу прокрутки.

Вот некоторый код, который я пытался заставить работать с помощью w3school редактор "try it" (http://www.w3schools.com/css/tryit.asp?filename=trycss_float)

<html>
    <head>
        <style type="text/css">
            h1{
                font-size:1em;
            }
            img 
            {
                float:left;
            }
            .field{
                width:100%
            }    
        </style>
    </head>

    <body>
        <img src="logocss.gif" width="95" height="84" />
        <div class="content">
            <h1>this is the title</h1>
            <form>
                <table width="100%">
                    <tr>
                        <td><input type="text" class="field"/></td>
                    </tr>
                </table>
            </form>
        </div>
    </body>    
</html>

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

Ответы [ 4 ]

2 голосов
/ 10 мая 2011

Поскольку у вас есть плавающее изображение с горизонтальным пространством из .content, вот почему вы получаете расширенную таблицу. .content div не знает ширины плавающего изображения. Вы можете сместить это, поместив поле размером не менее ширины изображения в .content div. 

.content 
{
    margin-left: 95px; 
}

скрипка

0 голосов
/ 11 мая 2011

Я думаю, что вы должны поместить ваш стол вместе с вашим изображением и удалить ширину: 100% на вашем столе.

<div id="content">
    <div id="side_bar" style="float:left;">image</div>
    <div id="main_content" style="float:left;">table</div>
    <div style="clear:left;"></div>
</div>

или по-старому 

<table>
    <tr>
        <td>image</td>
        <td>table</td>
    </tr>
</table>
0 голосов
/ 11 мая 2011

Div .content - это 100% ширины страницы, включая бит под плавающим изображением, поэтому вход, установленный на 100%, также будет таким широким, чтобы деление .content занимало только пространство, которое после плавающего изображения вы можете добавить overflow: hidden к нему, но затем сам input может использовать различные блочные модели, поэтому я бы предложил использовать для него ширину 99%. Если содержимое на самом деле не является input, то, возможно, 100% будет работать для большинства элементов;)

например. х-браузер код 

h1 {font-size:1em;}

table {border-collapse: collapse; width: 100%;}
table td {padding: 0;}

.content {overflow: hidden;}
form {padding: 0; margin: 0;}

img {float:left;}

.field {
    width:99%;
    margin: 0 auto;
}
0 голосов
/ 10 мая 2011

Попробуйте установить <table> на display: block в CSS и сбросить атрибут width="100%": 

table {
    display: block;
}

http://jsfiddle.net/ambiguous/dyxw7/

В приведенном выше примере красная границатаблицу, чтобы вы могли видеть, где она находится, я также изменил изображение на котенка, чтобы убедиться, что оно будет отображаться.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...