Правая ширина поплавка 100% не работает

Вот моя скрипка: http://jsfiddle.net/kasper90/GB7bs/6/ Я хочу, чтобы главный div был как можно большим, располагался прямо к переключателю div. Как я могу это сделать? Любая помощь очень ценится :)Правая ширина поплавка 100% не работает

Html:

<div id="toggle"></div> 
<script> 
$(document).click(function() { 
$("#toggle").toggle("slide",{ direction: "left" }, 1000); 
}); 
</script> 
<div id="main"><object data="http://euclidthegame.com/mathexchange/5.svg" type="image/svg+xml"></object></div>

Css:

#toggle { 
    float: left; 
    width: 100px; 
    height: 800px; 
    border: 1px solid black; 
    background: #ccc; 
} 
#main { 
    float: right ; 
    width: 100%; 
    height:800px; 
    border: 1px solid black; 
}

источник

2013-06-22 Kasper

Это работает именно так, как надо, потому что вы установили '# main' div на '100% width', поэтому он не может вписываться в верхнюю строку, потому что' 100% + 100px = более 100% ', поэтому он подталкивается под вашим' # toggle' div. –

@NickR Хорошо, я вижу, но я хочу, чтобы он имел как можно большую ширину, не подталкивая под ней. Это возможно ? – Kasper

Yep - либо установите вместо '# main' div значение' width: auto', либо укажите значения ширины 'divs'%. Но учтите, что установка границы также добавляет к общей ширине элементов. –

Я использовал это решение:

#main { 
    position: absolute; 
    height:800px; 
    border: 1px solid black; 
    width: 100%; 
    z-index: 1; 
} 

#toggle { 
    position:absolute; 
    width: 200px; 
    height: 800px; 
    border: 1px solid black; 
    background: #ccc; 
    z-index:2; 
}

источник

2013-11-28 17:56:31 Kasper

-1

#toggle {width:10%;} 
#main {width:89%;}

источник

2013-06-22 20:39:34

Это работает, но если я нажму на div div, он скроется, и в этом случае я хочу, чтобы главный div был на 100%. Поэтому я хочу, чтобы он получил как можно больше ширины, не подталкивая под тумблером div. – Kasper

Она смотрит на меня, как вы можете избавиться от float:right и width:100% на основной DIV , и достичь того, чего вы хотите.

http://jsfiddle.net/GB7bs/4/

источник

2013-06-22 20:47:15

hm .. это выглядело как трюк, но когда я добавил картинку, которую я хотел добавить, это как раньше: \t http://jsfiddle.net/kasper90/GB7bs/6/ – Kasper

Йо следует использовать ширина: авто в главном контейнере и удалить плавающий: вправо.

Это должен быть ваш CSS:

#toggle { 
    float: left; 
    width: 100px; 
    height: 800px; 
    border: 1px solid black; 
    background: #ccc; 
} 
#main { 
    height:800px; 
    border: 1px solid black; 
    width: auto; 
}

С уважением

источник

2013-06-22 20:59:17

Это не работает, смотрите изображение svg перемещается под divs: http://jsfiddle.net/kasper90/GB7bs/7/ – Kasper

Я думаю, что я иду за этим http://jsfiddle.net/kasper90/GB7bs/14/ – Kasper

Правая ширина поплавка 100% не работает

ответ

Смежные вопросы