2010-10-03 9 views
0

В CSS, как мне достичь следующего макета?Основной вопрос CSS

xxxxxxxxxxxxxR1xxxxxxxxxxxxx 
xxxxxxxxxxxxxR1xxxxxxxxxxxxx 
xxxxxxxxxxxxxR1xxxxxxxxxxxxx 

xR2.1x xxxxxxxxxR2.1xxxxxx 
xR2.1x xxxxxxxxxR2.2xxxxxx 
xR2.1x xxxxxxxxxR2.2xxxxxx 

xxxxxxxxxxxxxR3xxxxxxxxxxxxx 
xxxxxxxxxxxxxR3xxxxxxxxxxxxx 
xxxxxxxxxxxxxR3xxxxxxxxxxxxx 

R2.1 это изображение, которое я хочу пойти налево, и R2.2 является ДИВ, что я хочу пойти направо.

Если R2.2 был абзацем, это было бы легко - я мог бы просто использовать float:left на R2.1 - но факт, что это div, кажется, испортит ситуацию.

Я пробовал использовать <img style="float:left;"> и <div style="float:right">, вместе и отдельно, но они, кажется, не сочетаются хорошо.

Что я делаю неправильно?

+0

Это HTML , если это помогает отладки: http://larochedenchaille.com/guest-reviews – AP257

ответ

1

Там нет необходимости использовать поплавок: прямо на правой стороне, просто использовать поплавок: левый и запас:

<div>r1</div> 
<img style="float:left; width:50px; height:50px;" title="r2.1" /> 
<div style="margin-left:50px;">r2.2</div> 
<div style="clear:both;">r3</div>​ 
+0

получает толчок вниз, см. Http: // larochedenchaille. com/guest-reviews – AP257

+0

нет - он, наконец, работает! Спасибо! – AP257

0

Try:

<div style="margin-left: [width of picture]"> 
+0

div теперь имеет правую ширину, но img по-прежнему толкается ниже нее на следующей строке? – AP257

+0

сделали, но все еще вдавлено, посмотрите пожалуйста: larochedenchaille.com/guest-reviews – AP257

0

Поплавки должны работать, как ожидалось. Убедитесь, что вы добавили clear:both в div R3, поэтому он знает, что он должен начинаться под плавающими div, а левые/правые divs имеют правильную ширину, чтобы они не были перенесены в новую строку. Пример:

<div>r1</div> 
<img style="float:left;" alt="r2.1" /> 
<div style="float:right;">r2.2</div> 
<div style="clear:both;">r3</div>​​​​​​​​​​​​​​​​

http://jsfiddle.net/wHm8n/

+0

Думайте, что это проблема с шириной. img - фиксированная ширина 180 пикселей, как я могу установить div на «100% -180px»? – AP257

1

Есть ли какой-либо причине вы не можете поместить изображение внутри второй DIV? Это было бы разобраться:

<div id="r1" style="height:100px; background-color:#eff;">r1r1r1r1r1r1r1r1r1r1</div> 
<div id="r2" style="height:100px; background-color:#efe;">r2r2r2r2r2r2r2r2r2r2 
    <div id="image" style="width:160px;height:100px;background-color:#ff8;float:left"> 
    </div> 
</div> 
<div id="r3" style="height:100px; background-color:#fee;">r3r3r3r3r3r3r3r3r3r3</div> 

http://jsfiddle.net/WP6bc/1/

+0

Я бы хотел, чтобы у div был бледно-голубой фон, а изображение было на белом фоне страницы ... и я бы хотел, чтобы div не обертывал изображение ... и я хочу понять как плавать два divs отдельно, как в вопросе. Возможно, придется пойти с вашим решением, если я не смогу это сделать! – AP257

+0

Приятно наблюдать, как вы меняете страницу по мере обновления. Вы пришли очень близко на одном этапе, я думаю, что часть вашей проблемы - Div R2.2 имеет край 10px сверху и снизу, но изображение имеет только край по бокам. Добавьте марку 10px в верхнюю и нижнюю части изображения, и она выстроится лучше. – david

+0

получил это сейчас ... извините, спасибо за вашу помощь :) – AP257