Има ли начин Overflow inside multicol elements да работи?


1

Здравейте,

 

Открих нещо много интересно в нета, но не знам как да го накарам да сработи. Намира се на:

http://www.w3.org/TR/2009/WD-css3-multicol-20090630/#column-span0

точка:  8.1 Overflow inside multicol elements

 

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

 

Мерси предварително




Отговори



1
Еми аз като разгледах обяснението и примера не виждам никакъв трик номер. Дай кода си, да го прегледам как си го направил.

от Antoveravip (616 точки)


0
Добре, кода е:
HTML

space

Зbbdjbvfauvbbfbafkuvbfuvbfuvbfkjhvbfkvbufkhbvkabvkfbva



CSS:
#wrap{ width: 1000px; border: 1px solid #000; margin: 0 auto; padding: 10px; -moz-column-count:3; -webkit-column-count:3; -o-column-count:3; column-count:3; -moz-column-gap:20px; -webkit-column-gap:20px; -o-column-gap:20px; column-gap:20px; -webkit-column-rule-width:0px; -webkit-column-rule-color:#cbcefb; -webkit-column-rule-style:dotted; -moz-column-rule-width:0px; -moz-column-rule-color:#cbcefb; -moz-column-rule-style:dotted; -o-column-rule-width:0px; -o-column-rule-color:#cbcefb; -o-column-rule-style:dotted; column-rule-width:0px; column-rule-color:#cbcefb; column-rule-style:dotted; } img{ width: 660px; height: 300px; } h1{ //-webkit-column-count:2; // -moz-column-count:2; // column-count:2; float: left; width: 120%; //-webkit-column-break-before: avoid; //-moz-column-break-inside: avoid; }

от Veronika (74 точки)

0
Здравей, нещо не мога да схвана идеята на твоя код, какво би трябвало да се случи? Относно примера който е даден на посочения от теб линк: http://www.w3.org/TR/2009/WD-css3-multicol-20090630/#column-span0
няма никакъв трик, а по-скоро са го напаснали да изглежда добре. От страницата извадих кода който е използван за примера и след кратко разглеждане установих, че са направили следното:

Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc


M nop qrst uv wx yz.
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g hij klm nopqrs
tuv wxy z. Abc de fg
hi jklmno. Pqrstu vw

def g hij klm nopqrs
tuv wxy z. Abc de fg


x yz. Abc def ghi jkl.
M nop qrst uv wx yz.
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g hij klm nopqrs
tuv wxy z. Abc de fg


hi jklmno. Pqrstu vw
x yz. Abc def ghi jkl.


hi jklmno. Pqrstu vw
x yz. Abc def ghi jkl.
M nop qrst uv wx yz.
Ab cde fgh i jkl. Mno
pqr stu vw xyz.


An H2 element



CSS: .cols { width: 500px; height: 200px; background: #fff; position: relative; border: solid 5px blue; margin: 0.5em 2em 1em 0; font: bold 14px/19px Arial, sans-serif } .cols p { padding: 3px; margin: 0 } .col { position: absolute; left: 0px; top: 0; z-index: 6; width: 170px } .gap { position: absolute; background: green; width: 5px; bottom: 0px; top: 0px; border: 10px solid yellow; border-top-width: 0; border-bottom-width: 0; } .rep { position: absolute; top: 45px; background: black; height: 110px; width: 100px; color: white; z-index: 4 }
от това което аз виждам от кода - три div-а които с помощта на CSS са един до друг с определени размери и position. Врътката с "An H2 element" което е над dvi-овете е следната - това е div с орпеделени размери и positions спрямо основния div (
)
An H2 element

Другото нещо е как няма текст под "An H2 element" - много просто - оставят два празни реда:



от dam_dam (578 точки)


0
Здравей, нещо не мога да схвана идеята на твоя код, какво би трябвало да се случи? Относно примера който е даден на посочения от теб линк: http://www.w3.org/TR/2009/WD-css3-multicol-20090630/#column-span0
няма никакъв трик, а по-скоро са го напаснали да изглежда добре. От страницата извадих кода който е използван за примера и след кратко разглеждане установих, че са направили следното:

Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc


M nop qrst uv wx yz.
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g hij klm nopqrs
tuv wxy z. Abc de fg
hi jklmno. Pqrstu vw

def g hij klm nopqrs
tuv wxy z. Abc de fg


x yz. Abc def ghi jkl.
M nop qrst uv wx yz.
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g hij klm nopqrs
tuv wxy z. Abc de fg


hi jklmno. Pqrstu vw
x yz. Abc def ghi jkl.


hi jklmno. Pqrstu vw
x yz. Abc def ghi jkl.
M nop qrst uv wx yz.
Ab cde fgh i jkl. Mno
pqr stu vw xyz.


An H2 element



CSS: .cols { width: 500px; height: 200px; background: #fff; position: relative; border: solid 5px blue; margin: 0.5em 2em 1em 0; font: bold 14px/19px Arial, sans-serif } .cols p { padding: 3px; margin: 0 } .col { position: absolute; left: 0px; top: 0; z-index: 6; width: 170px } .gap { position: absolute; background: green; width: 5px; bottom: 0px; top: 0px; border: 10px solid yellow; border-top-width: 0; border-bottom-width: 0; } .rep { position: absolute; top: 45px; background: black; height: 110px; width: 100px; color: white; z-index: 4 }
от това което аз виждам от кода - три div-а които с помощта на CSS са един до друг с определени размери и position. Врътката с "An H2 element" което е над dvi-овете е следната - това е div с орпеделени размери и positions спрямо основния div (
)
An H2 element

Другото нещо е как няма текст под "An H2 element" - много просто - оставят два празни реда:



от dam_dam (578 точки)


0
колежката малко лошо е пуснала поста в нова тема и не се разбира точно за какво става въпрос. Има предишна тема ето тук - http://forums.academy.telerik.com/16524/column-layout-with-css3 , тази тема е продължение.

от Viktor_Ivanov (2505 точки)

0
ахааааа ... това съм го виждал как става, само да намеря линка и го post-вам :)

от dam_dam (578 точки)


1

Помъчих се да намеря решение на това което искаш да направиш, но не успях да направя да е в три колони.

Ето до къде стигнах

HTML

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Multi-columns with CSS3</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="wrap" class="clear">
            <img src="http://dummyimage.com/530x300/000000/fff.png" alt="space" id="space" />
        <p>
            Богомил Манчев, собственик на "Риск инженеринг" и консултант на американския "Глобъл пауър консорциум", оправда глобата в Италия за представител на основния инвеститор, който иска проекта АЕЦ "Белене"
            Богомил Манчев: "Глобал Пауър Консорциум" не пере руски пари
            Богомил Манчев, собственик на фирмата "Риск инженеринг", се оказа консултант на американския ""Глобъл пауър консорциум" (Global Power Consortium Ltd.), коxто в момента проучва възможността да закупи проекта за АЕЦ "Белене" от българското правителство.
            Днес Манчев, който през последните години многократно се изявява като един от най-упоритите защитници на проекта, спешно свика пресконференция.
            Богомил Манчев, собственик на "Риск инженеринг" и консултант на американския "Глобъл пауър консорциум", оправда глобата в Италия за представител на основния инвеститор, който иска проекта АЕЦ "Белене"
            Богомил Манчев: "Глобал Пауър Консорциум" не пере руски пари
            Богомил Манчев, собственик на фирмата "Риск инженеринг", се оказа консултант на американския ""Глобъл пауър консорциум" (Global Power Consortium Ltd.), коxто в момента проучва възможността да закупи проекта за АЕЦ "Белене" от българското правителство.
            Днес Манчев, който през последните години многократно се изявява като един от най-упоритите защитници на проекта, спешно свика пресконференция.
        </p>
        </div>
    </body>
</html>

CSS:

#wrap{

    width1000px;
    border1px solid #000;
    marginauto;
    padding10px;
    -moz-column-count:2;
    -webkit-column-count:2;
    -o-column-count:2;
    column-count:2;
    -moz-column-gap:20px;
    -webkit-column-gap:20px;
    -o-column-gap:20px;
    column-gap:20px;
}


{
    padding20px;
    -moz-column-count:2;
    -webkit-column-count:2;
    -o-column-count:2;
    column-count:2;
    -moz-column-gap:20px;
    -webkit-column-gap:20px;
    -o-column-gap:20px;
    column-gap:20px;
}

img {
    column-span2
}

тест - http://jsfiddle.net/siropo/X3FbW/

Ползват се само трите тага div, img и p. Успях картинката да я вкарам на 2 колони, обаче не успях да подкарам за сега да е една отстрани. Дано и други колеги се включат защото задачата е интересна.


от Viktor_Ivanov (2505 точки)


0
http://www.w3.org/TR/2007/WD-css3-grid-20070905/

от dam_dam (578 точки)

0
Grid Layout-a няма никаква поддръжка в момента за съжаление http://caniuse.com/#feat=css-grid

от Herowar (0 точки)



0

http://www.w3.org/TR/2009/WD-css3-multicol-20090630/#column-span0

точка:  8.1 Overflow inside multicol elements

Хмм поглеждайки Source Code на example-чето което са дали никъде не виждам да са използвали

img { float: left; width: 120% }

???

 

От това което виждам използват описания малко по-горе от мен метод:

черното което се вижда всъщност е div:

    <div class=rep style="width: 200px"></div>

 

class=rep e:
.rep { position: absolute; top: 45px; background: black; height: 110px; width: 100px;  color: white; z-index: 4 }

Извадих от source code точния код който са използвали за примера, както и css кода и получих същия резултат локално и при мен, но никъде няма img таг камо ли сетинга
img { float: left; width: 120% }
Аз ли бъркам нещо или ??

от dam_dam (578 точки)


0
прочете ли поста предишния който ти написах? В темата тук - http://forums.academy.telerik.com/16524/column-layout-with-css3 се казва: "Позволено е ползването само на един div, един параграф и една снимка." С повече тагове е ясно, че ще стане :)

от Viktor_Ivanov (2505 точки)

0
да, прочетох го, но след като post-нах последната простотия...
Извинявам се за spam-а.
В момента се опитвам да си спомня къде четох точно за това което се опитвате да сътворите ...!

от dam_dam (578 точки)