CSS поплавки перепутались - PullRequest
Новая
       35

CSS поплавки перепутались

0 голосов
/ 11 июля 2009

Это не останется там, где я хочу, посмотрите на это: 

<div style="float: left; width: 30%">
 <img src="{avatar}" alt="" />
</div>

<div style="float:right; width: 70%; text-align: left">
 {message}
</div>

<div style="clear:both"></div>

Internet Explorer:
image

Mozilla Firefox:
image

I want the text to be in the top (tried vertical-align: top), and i'd like the image to be in the white box in IE.

Hope someone more skilled can help me out.

Thanks! Can't figure out the problem :/

Edit: Added whole code


* { padding: 0; margin: 0; }

body {
font: 11px Geneva, "Trebuchet MS", Arial, Verdana, sans-serif;
width: 999px;
background: #EFEFEF;
}

#content {
width: 400px;
}

.thread-content {
padding: 5px;
border: 1px solid #CECFCE;
background: #FFF;
}

div.header {
border: 1px solid #CECFCE;
background: #FFF;
margin-bottom: 10px;
}




 {title}
user avatar
{сообщение}

Ответы [ 5 ]

2 голосов
/ 11 июля 2009

Убедитесь, что для обоих полей установлено значение 0: 

<img src="{avatar}" alt=""  style="float: left; width: 30%; margin: 0px"/> 

<div style="float:right; width: 70%; text-align: left; margin: 0px">
 {message}
</div>

<div style="clear:both"></div>

Поскольку css может быть очень сложным, попробуйте другие решения:

  • Пусть оба плавают влево, без разницы.
  • Убедитесь, что граница не увеличивает размер.
  • Уменьшить ширину на один бит, IE упрям.
0 голосов
/ 12 июля 2009

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

В любом случае, лично я бы попытался добиться эффекта dersired, хотя чистый CSS был бы больше похож на него. 

<html>
<head>
    <title>SandBox</title>  
    <style type="text/css">
        #outerDiv
        {
            margin:0;
            background-image:url(myImage.gif);
            background-position:top left;
            background-repeat:no-repeat;
            padding-left:30%;
            min-height:200px;
            background-color:#777777;               
        }
        #innerDiv
        {
            background-color:#333333;
        }
    </style>     
</head>
<body>
    <div id="container" style="width:500px;">
        <div id="outerDiv">
            <div id="innerDiv">content goes here</div>
        </div>
    </div>
</body>

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

0 голосов
/ 11 июля 2009

Когда вы говорите, ширина: 30% или ширина: 70%, это подразумевает ширину содержимого внутри div, исключая отступы, границы и поля div. Глядя на изображения, я уверен, что вы добавили несколько отступов и т. Д. В оба элемента div. Также я не вижу в вашем коде 'background: #fff', поэтому я не уверен, какой из них 'белый'.

0 голосов
/ 11 июля 2009

Код работает нормально, когда я попробовал. Вы уверены, что на изображении или в тексте нет отступов или полей? Это испортит проценты, которые вы используете. Если у вас есть, проверьте изображение и текст в Firebug, чтобы увидеть, какие стили применяются.

0 голосов
/ 11 июля 2009

Это происходит потому, что сумма (внешних) ширин двух плавающих элементов div больше внутренней ширины внешнего блока, поэтому они не помещаются в одну строку.

Попробуйте увеличить ширину внешнего элемента div, уменьшить его отступы, уменьшить ширину, поле или отступы внутренних блоков.

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

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

...