Блог

Главная - Вопросы по программированию - Невозможно обработать свойство Float:left

Невозможно обработать свойство Float:left

#css #html

#css #HTML

Вопрос:

 <!doctype html>
<html>
    <body>
        <table style="float:left;margin-left:20px;width:120px">
            <tr><td style="background-color:#EBEBF5;">Profile Info >> </td></tr>
            <tr><td>Entertainment</td></tr>
            <tr><td>Sports amp; Fun</td></tr>
            <tr><td>Add More </td></tr>
        </table>
        <table style="width:200px">
            <tr><td>info</td><td>Education</td><td>Work</td></tr>
        </table>
    </body>
</html>

Выглядит так, когда окно браузера развернуто

  Profile Info >>   info Education   Work
 Entertainment
 Sports amp; Fun
 Add More

Затем я уменьшил окно браузера все меньше и меньше до максимума, теперь оно выглядит так 

      Profile Info >>
     Entertainment
     Sports amp; Fun
     Add More
 info   Education   Work

Информация, образование и работа возвращаются к нижней части add more почему? почему свойство width не работает, когда я использую float:left? как мне обрабатывать, когда я использую свойство float:left?

Комментарии:

1. В вашем предыдущем вопросе вы сказали, что «изучаете html из Интернета». Для хорошего начала не используйте <table> s вообще. Забудьте о <table> . Единственный раз, когда вы должны использовать <table> , это когда у вас есть фактические табличные данные.

Ответ №1:

Это происходит потому, что вы перемещаете всю таблицу, а ваша строка Add More является частью основной таблицы. Если для них обоих недостаточно места, 2-я таблица будет перенесена ниже, как вы видите там. Если вы не хотите, чтобы оно переносилось, вам нужно обернуть все в a div , в котором есть min-width set .

 <div style="min-width: 400px;">
<!--INSERT YOUR TABLES HERE -->
</div>