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

ProgramBox

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

Post author:admin
Запись опубликована:3 мая, 2023
Post category:Вопросы по программированию

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

Я пытаюсь выполнить то, что, как я думал, будет простым, но, похоже, когда дело доходит до 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-скриптом, поэтому я хотел бы сохранить ее такой.

Ответ №1:

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

 .content 
{
    margin-left: 95px; 
}

скрипка

Ответ №2:

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

 table {
    display: block;
}

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

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

1. Добрый сэр, вам больше не нужно искать котенка, чтобы поместить его в свой код (хотя я восхищаюсь вашей самоотдачей). Я думаю, вы оцените удивительность placekitten.com

2. Таблица действительно отображается правильно в вашем решении, но мне нужно, чтобы текстовое поле также заполняло все пространство (я забыл указать, извините). Спасибо за ваш вклад!

Ответ №3:

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

например, x-browser-code

 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;
}

Ответ №4:

Я думаю, вам нужно переместить вашу таблицу вместе с вашим изображением и убрать ширину: 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>