Содержание проекта на странице

Question

У меня проблема с содержимым моей веб-страницы. Мне нужно на той же строке 3 div, где 1-й поплавок слева со статической шириной, 3-й - по левому/правому (у меня нет проблем с левым или правым) со статической шириной, а второй div должен иметь ширину как пространство между 1-м и 3-м элементами.

Например:
- окно имеет ширину 1920px, первый DIV имеет ширину 200px и поплавка слева, третий DIV имеет ширину 200px и flaoted влево => второй DIV имеет ширину 1520px
Следующий пример:
- окно имеет ширину 1000px, 1-й div имеет ширину 200px и float слева, 3-й div имеет ширину 200px и flaoted left => 2-й div имеет ширину 600px => разная ширина окна делает разную ширину div2, и мне нужна эта проблема на каждой ширине экрана.

Я пытаюсь использовать второй div как «display: block; margin-left: -200px; margin-right: -200px;», но это не работает. Это решение работает, только если у меня есть только 1-й 2-й дивизион.

Проценты не решением, так как 1% по ширине 1000px отличается число 1% на 500px и т.д ..

я могу решить это с помощью Javascript, но поиск решения CSS becasuse, если я использовал изменение размера, то я должен звоните JS еще и это уродливо. Является ли это возможным?

Answer 1

Да, это может быть легко выполнено с использованием media queries. Это примерно, как он будет работать с двумя примерами:

окна имеет ширину 1920px, первый DIV имеет ширину 200px и поплавок слева, третий DIV имеет ширину 200px и flaoted влево => второго DIV имеет ширину 1520px

@media (max-width: 1920px) { 
    .div1 { 
    width: 200px; 
    float: left; 
    } 
    .div2 { 
    width: 1520px; 
    } 
    .div3 { 
    width: 200px; 
    float: left; 
    } 
} 

---

окно имеет ширину 1000px, первый DIV имеет ширину 200px и поплавка слева, третий DIV имеет ширину 200px и flaoted влево => второй DIV имеет ширину 600px

@media (max-width: 1000px) { 
    .div1 { 
    width: 200px; 
    float: left; 
    } 
    .div2 { 
    width: 600px; 
    } 
    .div3 { 
    width: 200px; 
    float: left; 
    } 
} 

---

Это только примеры. Теперь идея состоит в том, чтобы иметь «глобальный» набор правил, таких как общие правила для каждого класса/id/element (например, div1 и div3 в вашем случае всегда плавают влево), а затем использовать медиа-запросы только для записи исключения из этих правил. Итак, вот как приведенные выше примеры будут выглядеть так, что практика:

.div1 { 
    width: 200px; 
    float: left; 
} 

.div3 { 
    width: 200px; 
    float: left; 
} 

@media (max-width: 1920px) {  
    .div2 { 
    width: 1520px; 
    } 
} 

@media (max-width: 1000px) { 
    .div2 { 
    width: 600px; 
    } 
} 

Как вы видите, нет необходимости писать отдельные СМИ правил запроса для div1 и div3, поскольку их правила остаются теми же в этом примере. Надеюсь, это имеет смысл.

---

UPDATE

если я открываю его в вдове с 900px или 901px или 888px или 910px или 1280px и т.д .. => 1520px решена только полный экран reoslution, но в другом разрешении 1520px настолько велик

.div2 { 
    width: 600px; 
} 

@media (min-width: 1920px) { 
    .div2 { 
    width: 1520px; 
    } 
} 

Это должно сработать.Значение по умолчанию: div2 шириной до 600 пикселей, но если окно 1920px или шире, div2 становится шириной 1520 пикселей.

Answer 2

Вы можете использовать процент вместо pxs.Something так:

.div1{ 
 
float:left; 
 
width:12%; 
 
height: 200px; 
 
background: blue; 
 
} 
 

 
.div2{ 
 
width:70%; 
 
float:left; 
 
height: 200px; 
 
margin:0 3%; 
 
background: blue; 
 
} 
 

 
.div3{ 
 
width:12%; 
 
float:left; 
 
height: 200px; 
 
background: blue; 
 
}

<div style="width:600px"> 
 
<div class="div1"></div> 
 
<div class="div2"></div> 
 
<div class="div3"></div> 
 
</div>

Если это не будет работать для вас, вы можете посмотреть here .HOpe это работает для вас