2 DIV в строку на всю ширину

Discussion in 'PHP' started by slesh, 5 Feb 2011.

  1. slesh

    slesh Elder - Старейшина

    Joined:
    5 Mar 2007
    Messages:
    2,702
    Likes Received:
    1,224
    Reputations:
    455
    весь вечер бьюсь, не могу понять как сделать фишку примерно такую:
    1) есть 2 DIV которые надо чтобы были в одну строку
    2) один из них имеет фиксированную ширину и должен располагаться с права
    3) другой должен иметь ширину всего оставшегося пространства (иметь резиновую ширину)

    Главные условия:
    1) таблицы не предлагать
    2) Не должно быть привязки к ширине экрана
    3) если уменьшать размер окна, то будет уменьшаться элемент с резиновой шириной, до тех пор пока не дойдет до минимальной ширины 200px;
    4) как только размер окна уменьшится до такой степени что 2 элемента уже не смогут быть в ряд, то чтобы один стал под другим.

    Можно даже чтобы блоки не прееносились при достижении минимального размера

    что уже не пытался.
    Максимальный результат - всё как надо, но при уменьшении размера, один наезжает на другова, и переносится только в том случае когда размер экрана становится меньше размера резинового элемента.
    (это из-за margin-right)
    Илиже чаще вообще происходит что резиновый слой растягивается по всей ширине, залазея на другой

    всё перебрал, ничего не помогает.
     
    #1 slesh, 5 Feb 2011
    Last edited: 5 Feb 2011
  2. slesh

    slesh Elder - Старейшина

    Joined:
    5 Mar 2007
    Messages:
    2,702
    Likes Received:
    1,224
    Reputations:
    455
    вот как пример чего хочу добиться. Работает в IE 6 отлично, а вот FF и Opera не растягивают первый блок
    PHP:
    <html>
    <    head>
        <    style>
                #main
                {
                    width: 100%;
            }
            
                #block_2
                {
                    width: 200px;
                    background-color: red;
                    float:right;
                    display: inline-block;
            }
            
                #block_1
                {
                    background-color: blue;
                    display: inline-block;
            }
        </    style>
    </    head>
    <    body>
        <    div id="main">
            <    div id="block_2">
                    text text text text text 
                </div>
            <    div id="block_1">
                text5 text4 text3 text2 text1<br> 
                this_text_emule_minimum_width_of_blocks_this_text_emule_minimum_width_of_blocks_
                </div>
            
            
        </    div>
    </    body>
    </    html>
     
    #2 slesh, 5 Feb 2011
  3. FewG

    FewG Member

    Joined:
    25 Dec 2009
    Messages:
    136
    Likes Received:
    12
    Reputations:
    0
    А как на счет сего?

     
    #3 FewG, 5 Feb 2011
  4. SaiRus

    SaiRus Elder - Старейшина

    Joined:
    24 Nov 2008
    Messages:
    369
    Likes Received:
    41
    Reputations:
    0
    PHP:
    <html> 
    <    head> 
        <    style> 
                #main 
                { 
                    width: 85%;
                    border:1 solid red; 
                    float:left;
            } 
             
                #block_2 
                {     width:100%;
                    background-color: red; 
                } 
             
                #block_1 
                {     width: 200px;
                    background-color: blue; 
                    float:left;
                
            } 
        </    style> 
    </    head> 
    <    body> 
        <    div id="main"> 
            <    div id="block_2"> 
                    text text text text text  
                </div>
        </    div> 
        <    div id="block_1"> 
                text5 text4 text3 text2 text1<br>  
                this_text_emule_minimum_width_of_blocks_this_text_  emule_minimum_width_of_blocks_ 
            </div>  
    </    body> 
    </    html> 
    Посмотри плиз, мож я не понял задачи, но вроде так...
     
    #4 SaiRus, 5 Feb 2011
  5. Gifts

    Gifts Green member

    Joined:
    25 Apr 2008
    Messages:
    2,494
    Likes Received:
    807
    Reputations:
    614
    slesh
    HTML:
    <html>
<head>
	<style>
		#main
		{
			width: 100%;
		}
		
		#block_2
		{
		width: 200px;
		float: right;
		background-color: red; 
		}
		
		#block_1
		{
		margin-right: 200px;
		background-color: blue; 
		}
	</style>
</head>
<body>
	<div id="main">
		<div id="block_2">
			text text text text text 
		</div>
		<div id="block_1">
		text5 text4 text3 text2 text1<br> 
		this_text_emule_minimum_width_of_blocks_this_text_  emule_minimum_width_of_blocks_
		</div>
		
		
	</div>
</body>
</html>
     
    _________________________
    #5 Gifts, 5 Feb 2011
  6. slesh

    slesh Elder - Старейшина

    Joined:
    5 Mar 2007
    Messages:
    2,702
    Likes Received:
    1,224
    Reputations:
    455
    2 Gifts такое уже примерно делал. неподходит.
    Потому что при сужении окна, правый блок начинает наезжать на левый и перенос будет только в том случае когда размер станет меньше максимального элемента.
    К томуже есть еще одна вешь, если окно уменьшается сильно и произошел перенос, левый элемент начинает скролится в право (как им надо) а правый элемент начинает изчезать с левой стороны
    Для теста сам поробуй вставить в оба блока картинки
    200*100 - в правый и 150*100 в левый
     
    #6 slesh, 5 Feb 2011
    Last edited: 5 Feb 2011
  7. slesh

    slesh Elder - Старейшина

    Joined:
    5 Mar 2007
    Messages:
    2,702
    Likes Received:
    1,224
    Reputations:
    455
    т.е. по факту это должно быть чтото типа
    PHP:
    <table width=100%>
        <    tr>
            <    td bgcolor=red>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz yyyyyyyyyyyyyyyy</td>
            <    td bgcolor=blue width=200px>aaaaaaaaaaaaaaaaaaaa</td>
        </    tr>
    </    table>
    но только на DIV'ах и совместимое с IE 6 (именно по этому display:table не катит)
     
    #7 slesh, 5 Feb 2011
  8. banned

    banned Banned

    Joined:
    20 Nov 2006
    Messages:
    3,324
    Likes Received:
    1,193
    Reputations:
    252
    PHP:
    <div style="width:100%">
        <    div style="float:right;background-color:blue;width:200px;position:relative;display:block;">aaaaaaaaaaaaaaaaaaaa</div>
        <    div style="background-color:red;width:100%;display:block;">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz yyyyyyyyyyyyyyyy</div>
    </    div>
     
    #8 banned, 5 Feb 2011
  9. slesh

    slesh Elder - Старейшина

    Joined:
    5 Mar 2007
    Messages:
    2,702
    Likes Received:
    1,224
    Reputations:
    455
    2 Isis почти то, но опять же - при минимизации размеров правый блок уходит влево за края экрана и тогда данные в нем не видны
     
    #9 slesh, 5 Feb 2011
  10. SaiRus

    SaiRus Elder - Старейшина

    Joined:
    24 Nov 2008
    Messages:
    369
    Likes Received:
    41
    Reputations:
    0
    PHP:
    <html>  
    <    head>  
        <    style>  
    #main {
          width: 100%;
          float: left;
          margin-right: -200px;
    }
    #block2 {
          width: 200px;
          float: right;
          background-color:#CCCCCC;
     
    }
    #block1 {
          background: #f1f2ea;
          margin-right: 200px;
    }   </    style>  
    </    head>  
    <    body>  
    <    div id="main">
      <    div id="block1">
           Lorem Ipsum   Lorem Ipsum   Lorem Ipsum   Lorem Ipsum   Lorem Ipsum   Lorem Ipsum   Lorem Ipsum   Lorem Ipsum   Lorem Ipsum   Lorem Ipsum   Lorem Ipsum   Lorem Ipsum   Lorem Ipsum   Lorem Ipsum   Lorem Ipsum   Lorem Ipsum   Lorem
          </div>
    </    div>
    <    div id="block2">
          Lorem Ipsum   Lorem Ipsum   Lorem Ipsum   Lorem Ipsum 
          </div>
    </    body>  
    </    html> 
     
    #10 SaiRus, 5 Feb 2011
(You must log in or sign up to post here.)
Loading...
Similar Threads - строку ширину
  1. GAiN

    MySql: дублирование одной строки несколько раз

    GAiN, 9 Feb 2023, in forum: PHP
    Replies:
    3
    Views:
    7,452
    sherxan-g
    20 Mar 2023
Language
English (US)
    ANTICHAT ™ © 2001-2027 Antichat Kft.