CSS орналастыру мысалы (тақырып, сурет, мәтін және қосымша сілтеме)

Кесіндіге келесі дизайнды айтуға болады:

enter image description here

Мен оны дивиздерді абсолютті орналастыруды пайдаланбаған және кесте орналасуларын пайдаланбай (егер олар мүлде орналасу деп аталса :)) ажыратуға болады?

0
Иә Иә! :))))
қосылды автор Narek, көзі
бәлкім, float бар?
қосылды автор Marnix, көзі

4 жауаптар

Менің ойымша, бұл jsFiddle сияқты болады:

http://jsfiddle.net/cFqDX/

<html>
    <body>
        <div class="mainbody">
            

Some title

            
            
Putting a lot of text here. Putting a lot of text here. Putting a lot of text here. Putting a lot of text here.Putting a lot of text here. Putting a lot of text here. Putting a lot of text here. Putting a lot of text here. Putting a lot of text here. </div> </body> </html>

Ал CSS үшін.

.mainbody
{
    background-color:gray;
    width:800px;
    height:300px;
}

.leftimage
{
    margin:10px;
    float:left;
}

This gives me the following image: enter image description here

1
қосылды

Екі дивиз жасау. float: left және сол жағында float: right деген сурет бар сурет бар сол жақтағы сурет. Осылайша бір-біріңіздің жанында екі «баған» болады.

Бірақ бұл негізінен шексіз шешімдер бар.

1
қосылды
Рахмет, егер менде 3 «баған» болса, мысалы, img; мәтіндік блок 1; мәтіндік блок 2 ???
қосылды автор Narek, көзі
Пожалуйста, нақты болыңыз. Орталық бағанды ​​қалай жасау керек? Сол және оң бағандар анық немесе оң жаққа қарай өзгереді. Мәселен орталық?
қосылды автор Narek, көзі
Жарайды ма. Рақмет сізге!!!
қосылды автор Narek, көзі
Әрбір мәтін блогы үшін div және float параметрін қолданыңыз.
қосылды автор Jules, көзі
Орталық баған өзгермелі болмайды. Менің ойымды түсіндіру үшін жасаған JSfiddle-ді тексеріңіз: jsfiddle.net/MUpmD
қосылды автор Jules, көзі

Сіз float: left немесе display: inline-block мәтінін айналасында бөлісуіңізге болады.

1
қосылды
Экрандағы екінші нұсқасы: inline-block жұмыс істемейді :(
қосылды автор Narek, көзі
О, суретті қалдырсам, екінші нұсқасы жұмыс істейді! Рахмет!
қосылды автор Narek, көзі
Сурет өздігінен болса керек. Егер сурет блокта болса, сол блокта display: inline немесе inline-block болуы керек. Бірақ егер ол сіз үшін жұмыс істемесе, өзгермелі болады. :)
қосылды автор GolezTrol, көзі

Мен мұнда jsfiddle жасадым, ол күткендей, браузерлерде өте жақсы жұмыс істейтін болады және өте оңай.

1
қосылды
Рахмет, бірақ неге толып кетуді пайдаланасыз: auto; сынып үшін.
қосылды автор Narek, көзі
Жойылған! Ештеңе болмайды :))! BTW Мен UPDATE батырмасын бассам да!
қосылды автор Narek, көзі
Оны алып, не болатынын қараңыз:)
қосылды автор Steve Adams, көзі
Бір қызығы, бірінші блоктағы кескінді айналдыратын элементтерге елеусіз өнімнің жіктелуіне байланысты .product div айналдыруы керек. Мен контейнерге семантикалық тұрғыдан пайдасыз элемент қоюдан гөрі, оны «таза фикс» ретінде қолданамын. EDIT: Wow, сіз дұрыссыз. Мен осында алдым, haha. Бұл қажет емес сияқты.
қосылды автор Steve Adams, көзі