Прыклад размяшчэння CSS (загаловак, выява, тэкст і чытаць далей спасылку)

Скажам, у мяне ёсць наступны дызайн нарэзаць:

enter image description here

Як я магу нарэзаць яго, не выкарыстоўваючы абсалютная размяшчэнне дзівы і не выкарыстоўваючы макеты табліц (калі іх можна назваць макеты на ўсіх :))?

0
Так, так! :))))
дададзена аўтар Narek, крыніца
з якая плавае кропкай, верагодна?
дададзена аўтар 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
дададзена

Зрабіце два дзіў-х. Левыя адзін, які змяшчае малюнак з паплаўка: левы і адзін справа з паплаўка: правы . Паступаючы такім чынам вы будзеце мець дзве «калоны» побач адзін з адным.

Але ў асноўным ёсць бясконцыя вырашэння гэтага ....

1
дададзена
Дзякуй, што, калі ў мяне ёсць 3 «слупкі», напрыклад, IMG; Тэкставы блок 1; Блок тэкст 2 ???
дададзена аўтар Narek, крыніца
Удакладніце, калі ласка. Як я павінен стварыць цэнтральную калонку? Левыя і правыя калонкі ясна, будзе ўсплываць направа або налева. Так што наконт цэнтральнай ??
дададзена аўтар Narek, крыніца
Добра. Дзякуй!!!
дададзена аўтар Narek, крыніца
Зноў DIV для кожнага тэкставага блока і выкарыстоўвайце опцыю паплаўка.
дададзена аўтар Jules, крыніца
Цэнтральная калонка ня павінна плаваць. Праверце JSfiddle, што я зрабіў, каб растлумачыць свой пункт гледжання: jsfiddle.net/MUpmD
дададзена аўтар Jules, крыніца

Вы можаце альбо паплавок: левы або зрабіць DIV вакол тэксту, які вы даяце Дысплей: убудаваны блок .

1
дададзена
Другая версія з дысплеем: убудаваны блок не працуе :(
дададзена аўтар Narek, крыніца
О, другі варыянт працуе, калі я паплавок пакінуў малюнак! Дзякуй!
дададзена аўтар Narek, крыніца
Ён павінен, калі малюнак само па сабе. Калі малюнак знаходзіцца ў самым блоку, што блок павінен мець Дысплей: убудаваны або ўбудаваны блок а. Але калі ён не будзе працаваць для вас, заўсёды ёсць паплавок. :)
дададзена аўтар GolezTrol, крыніца

Я зрабіў jsfiddle тут, што я чакаў бы працаваць вельмі добра ва ўсіх браўзэрах і даволі просты ў абслугоўванні.

1
дададзена
Дзякуй, але чаму вы карыстаецеся перапаўненне: аўто; для класа .product?
дададзена аўтар Narek, крыніца
Выдаленыя! Нічога не адбываецца :))! Дарэчы, я націснуў кнопку UPDATE таксама!
дададзена аўтар Narek, крыніца
Выдаліце ​​яго і паглядзець, што адбываецца :)
дададзена аўтар Steve Adams, крыніца
Дзіўна, ён павінен выклікаць малюнак у першым блоку, каб перакрываць .product DIV, з-за .product DIV не звяртаючы ўвагі на плаваюць элементы. Я выкарыстоўваю гэта як свайго роду «clearfix», а не пакласці семантычна бескарысны элемент у кантэйнер. EDIT: Wow, вы маеце рацыю. Я атрымаў наперадзе сябе тут, ха-ха. Аказваецца, гэта не трэба.
дададзена аўтар Steve Adams, крыніца