плавающего элемент толкает вниз предыдущего элемент

http://jsfiddle.net/4gw8wank/плавающего элемент толкает вниз предыдущего элемент

У меня есть 3 контейнера в качестве части отзывчивой страницы. В мобильном зрения они должны отображаться в синий порядок-, красный, зеленый, сложенные друг на друга, как так ..

<div class="blue"></div> 
<div class="red"></div> 
<div class="green"></div>

это хорошо, но в опыте рабочего стола, используя ту же разметку, они должен отображаться, как показано на скрипке выше, то есть с синим и зеленым контейнерами справа, с фиксированной шириной и красным контейнером слева, при этом красный контейнер должен охватывать оставшуюся ширину страницы, например:

enter image description here

Я вижу проблему, где при меньших разрешениях, зеленый контейнер будет выталкиваться вниз, смотрите ниже

enter image description here

Есть ли способ, что я могу обойти это?

источник

2015-01-28 andy mccullough

Вы можете использовать следующие стили:

.test1 { 
    padding-right:200px; 
} 
.right { 
    float:right; 
    width:200px; 
    margin-right:-200px; 
    clear:right; 
} 
.left { 
    float:left; 
    width:100%; 
}

Example

Example with media query stacking

источник

2015-01-28 10:44:31 Pete

nice .. В идеале я бы хотел, чтобы все элементы плыли по другим причинам, которые вы отсортировали - спасибо! –

Что делать, если я хочу 1px border-bottom для test1 –

@NaeemShaikh вы добавляете его так же, как и в любом другом стиле: http://jsfiddle.net/4gw8wank/14/ – Pete

До сих пор я знаю, изменить HTML структуру как this, если вы хотите, чтобы показать дивы в для рабочего стола разного порядка, как вы упомянули в своем вопросе,

показать различный HTML на рабочем столе, и один, как я связанный выше для более мелких устройств (с использованием mediaQuery).

Demo (и я видел подобный вопрос на SO прежде чем я просто не могу найти)

<!-- for mobile --> 

<div class="test1 hidden-lg hidden-md hidden-sm"> 
    <div> 
    <div class="right blue"> 
     <p>some text some text some text some text some text some text some text some text </p> 
    </div> 
    <div class="right green"> 
     <p>some text some text some text some text some text some text some text some text </p> 
    </div> 
    </div> 
    <div class="left red"> 
     <p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p> 
    </div> 

</div> 




<!-- for desktop --> 

<div class="test1 hidden-xs"> 
    <div class=" blue"> 
     <p>some text some text some text some text some text some text some text some text </p> 
    </div> 

    <div class=" red"> 
     <p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p> 
    </div> 
    <div class=" green"> 
     <p>some text some text some text some text some text some text some text some text </p> 
    </div> 
</div>

источник

2015-01-28 10:34:47

спасибо! Может быть, последнее средство использовать два разных html-шаблона, но это сработает, хотя я не использую bootstrap, я получаю концепцию. –

рад:) .......... –

Это нормальное поведение iour добиться того, что вы хотите сделать, вы можете использовать:

1- CSS-известково функция

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <style> 
 

 
     .right{float:right; clear:right; width:200px} 
 
     .left { 
 
     display: block; 
 
     overflow: hidden; 
 
     max-width: calc(100% - 200px); 
 
     float: left; 
 
     } 
 

 

 

 

 
     .blue{ 
 
     background:blue; 
 
     } 
 

 
     .green{ 
 
     background:green; \t 
 
     } 
 

 
     .red{background:red;} 
 

 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class="test1"> 
 
     <div class="right blue"> 
 
     <p>some text some text some text some text some text some text some text some text </p> 
 
     </div> \t 
 

 
     <div class="left red"> 
 
     <p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p> 
 
     </div> 
 
     <div class="right green"> 
 
     <p>some text some text some text some text some text some text some text some text </p> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

источник

2015-01-28 10:52:57

Я думаю, что css calc не поддерживается IE8, который, к сожалению, я должен поддерживать, спасибо @Tambo! –

-1

Я пришел к этому решению, используя ширину в процентах, а также в средствах массовой информации запрос для меньшего размера экрана. Я надеюсь, что это помогает:

http://jsfiddle.net/ben220/rjef89uw/

<div class="blue"> 
    <p>some text some text some text some text some text some text some text some text </p> 
</div> 

<div class="red"> 
    <p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p> 
</div> 

<div class="green"> 
    <p>some text some text some text some text some text some text some  text some text </p> 
</div> 


* { 
box-sizing: border-box; 
} 

div { 
    height: 120px; 
    border: 1px solid transparent; 
} 


.blue { 
    background:blue; 
    width: 30%; 
    float: right; 
} 

.green { 
    background:green; 
    width: 30%; 
    float: right; 
} 

.red { 
    background: red; 
    float: left; 
    width: 70%; 
} 

@media screen and (max-width: 580px) and (min-width: 1px) { 
    .blue, .green, .red { 
    float: none; 
    width: 100%; 
    } 
}

источник

2015-01-28 10:57:15

плавающего элемент толкает вниз предыдущего элемент

ответ

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