Здравейте,
Много ми се искаше да успея да си разреша един проблем сама, но от няколко дни се мъча и не успявам :(
Проблемът е следния:
Искам да създам страница, която да има вестникарски 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?
Благодаря предварително :)
