Column layout with CSS3


2

Здравейте,

Много ми се искаше да успея да си разреша един проблем сама, но от няколко дни се мъча и не успявам :(

Проблемът е следния:

Искам да създам страница, която да има вестникарски layout. Позволено е ползването само на един div, един параграф и една снимка. Искам да разделя параграфа на 3 колони, а снимката да е най-отгоре, така че ширината й да е колкото две колони, а трета колона да започва от началото на div-а и да се спуска отдясно на снимката.

Кодът ми е много кратък, следния:

<div id="wrap">

<img src="" />

<p>bvbfubafuhavbaufbubau</p>

</div>

 

#wrap{
width: 1000px;
padding: 20px;
margin: 20px auto;
border: 1px solid #000;
 
}
p{
text-indent:100px;
text-align: justify;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-rule: 2px solid #000;
-moz-column-count: 3;
-moz-column-gap: 20px;
 
 
}
 
img{
 
    width:600px;
    height:400px; 
 
}
 
Зададено по този начин трета колона на параграфа си започва от края на снимката и остава бяло поле, ако задам -webkit-column-count: 3; на div-a, снимката влиза в първата колона на параграфа и не знам как да я направя да е над двете колони.
 
Имали някой идея как може да стане само с HTML5 и CSS3? 
 
Благодаря предварително :)



Отговори



1

Нещо такова ли трябва да стане:
Синъото е текст.

 

 

 

Ако резултатът трябва да е този това е моето решение но не вярвам да е добро. Реално спазвам изискванията в условието но не е качествен кода. За сега не мога да стопля по умно решение. http://forums.academy.telerik.com/?qa=blob&qa_blobid=13958164500643162703


от Ivaylo (696 точки)


0
Да точно тава трябва да се получи :) мерси много колега :) , но пак не решава проблема, ако искам да променя текста вътре :(

от Veronika (74 точки)