Делайте DIV и его содержание только отзывчиво в ширину? -- html поле с участием css пол Связанный проблема

Make Div and its content only responsive in width?


0
vote

проблема

русский

Прежде всего я немного запутался, но я сделаю все возможное, чтобы объяснить мою проблему и то, что я хочу.

У меня есть div, и внутри этого div у меня есть другой div, я хочу, чтобы этот ДИД переехать влево и вправо, ничего более, он должен следовать тому же пути, что и изображение при изменении размера (см. Мой проект).

.

Как мне сделать этот девл, который стоит за белым кругом, всегда делают тот же путь, что и круг?

 <Код> cmake ..  0  
 <Код> cmake ..  1  

PS PS: Извините за аргументацию, мой английский не лучший, надеюсь, вы сможете понять. С уважением, Duarte andrade.

Английский оригинал

First of all im a bit confused but i will do my best to explain my problem and what i want.

I have a div and inside that div i have another div, i want that div to move to left and right, nothing more, it has to follow the same path as the image when resizing (see my project).

How do i make that div that is behind the white circle always do the same path as the circle ?

body {    margin: 0;    width:100%;  }    body > div {    height: 200px;  }        .header {     background-color: transperent;    height: 100px;    color: white;  }    .product {       margin-top:0px;    height: 600px;     background-color: blue;    color: white;    float:left;    width:50%;    margin:0;    padding:0;    display: inline-block;  }    .product2 {    height: 600px;    margin-top:0px;    background-color: red;    color: white;    width:50%;    float:left;     margin:0;    padding:0;    position: relative;    display: inline-block;  }    .product2 img{    position: absolute;    right: 0;    bottom: 0;  }    .main{   background-image: url("http://i.imgur.com/Y5hHusa.png");   height:650px;  }    #crew {    height:50px;    clear:both;    background-color: tomato;    color: darkgrey;  }    .stick {      position: fixed;      top: 0;  }    .tour {    background-color: black;    color: darkgrey;  }    .pricing {    background-color: gold;    color: black;  }    .contact {    background-color: black;    color: white;  }    .menu {      float: right;      font-size: 18px;      list-style: outside none none;      margin-top: -5px;   margin-right: 50px;  }    .menu li a {      color: blue;      display: block;      text-decoration: none;  }    .menu li {      display: inline;      float: left;      padding-right: 23px;  }     .menu li a:hover{   background-color:none;   color:red;  }    .div_form {    height:35%;  width:40%;  margin-top:36%;  margin-left:41%;  background-color:blue;  }    .product2 .div_form{    }    .product2 .div_form .form_title{  position:absolute;  z-index:1;  margin-top:270px;  margin-left:1em;  font-size:3em  }    .product2 .div_form .form_circulo{    z-index:1  }    .product2 .div_form .div_email .input_first_email{  margin-top: -70%;  margin-left:50%;  height:3em;  border-radius:5px;  padding:1em;  width:45%;   }    .product2 .div_form .divbtnsubmit{  background-color:red;  margin-left:60%;  width:20em;  height:3em;  border-radius:1em;  text-align:center;  margin-top:1em;  width:45%  }    .product2 .div_form .divbtnsubmit .btnsumnitform  {  font-size:2em;  color:white;  position:absolute;  padding:.3em;  margin-left:-3.5em  }
<!DOCTYPE html>  <html>  <head>    <meta charset="utf-8">    <link href="styles.css" rel="stylesheet" type="text/css" >    <title> Layout </title>  </head>  <body>    <div class="main">  <div class="header">    <img src="http://i.imgur.com/48nYArD.png">        <ul class="menu">   <li><a href="#">Home &nbsp;&nbsp;&nbsp;</a> </li>      <li><a href="#">Product Tour&nbsp;&nbsp;&nbsp;</a> </li>      <li><a href="#">Pricing&nbsp;&nbsp;&nbsp;</a> </li>      <li><a href="#">Try&nbsp;&nbsp;&nbsp;&nbsp;</a></li>      <li><a href="#">Vision</a></li>                 </ul>  </div>      <div class="product">    </div>    <div class="product2">            <img src="http://i.imgur.com/3UTs03w.png">    <div class="div_form">              </div>            </div>                       </div>     </div>          <div id="crew">    </div>    <div class="tour">    </div>    <div class="pricing">    </div>    <div class="contact">  </body>  </html> 

PS: Sorry for argumentation, my english isnt the best, hope you can understand. Regards, Duarte Andrade.

</div
     
     
     

Список ответов

0
 
vote

Проблема в том, что вы пытаетесь расположить <код> div_form div вертикально, придавая ему <код> margin-top 36% . Но маржа со значением в <Код> % всегда относительно ширины контейнера, а не высоты. Смотрите w3c .

Самое простое решение, потому что вы знаете высоту контейнера (<код> product2 ) - 600px, это установить маржу до 36% от 600px или 216px.

 <Код> body {    margin: 0;  }  .product {    height: 600px;    background-color: blue;    color: white;    float: left;    width: 50%;    margin: 0;    padding: 0;    display: inline-block;  }  .product2 {    height: 600px;    background-color: red;    color: white;    width: 50%;    float: left;    margin: 0;    padding: 0;    position: relative;    display: inline-block;  }  .product2 img {    position: absolute;    right: 0;    bottom: 0;  }  .div_form {    height: 35%;    width: 40%;    margin-top: 216px; /* This is what I changed */    margin-left: 41%;    background-color: blue;  }  
 <Код> <div class="main">    <div class="header">        <div class="product">      </div>      <div class="product2">        <img src="http://i.imgur.com/3UTs03w.png">        <div class="div_form">          </div>      </div>    </div>  </div>  

Или, если вам действительно нужен процент роста родителя, вы бы удалили поля и дайте Div position:absolute так же, как и <код> img . Тогда вы можете использовать <код> left:41%; top:36%; , но вам также нужно будет поэкспериментировать с z-индексами немного, чтобы снова получить их заказы на укладку.

 

The problem is you're trying to position the div_form div vertically by giving it a margin-top of 36%. But a margin with a value in % is always relative to the width of the container, not the height. See the W3C.

The simplest solution is, because you know the height of the container (product2) is 600px, is to set the margin to 36% of 600px, or 216px.

body {    margin: 0;  }  .product {    height: 600px;    background-color: blue;    color: white;    float: left;    width: 50%;    margin: 0;    padding: 0;    display: inline-block;  }  .product2 {    height: 600px;    background-color: red;    color: white;    width: 50%;    float: left;    margin: 0;    padding: 0;    position: relative;    display: inline-block;  }  .product2 img {    position: absolute;    right: 0;    bottom: 0;  }  .div_form {    height: 35%;    width: 40%;    margin-top: 216px; /* This is what I changed */    margin-left: 41%;    background-color: blue;  }
<div class="main">    <div class="header">        <div class="product">      </div>      <div class="product2">        <img src="http://i.imgur.com/3UTs03w.png">        <div class="div_form">          </div>      </div>    </div>  </div>

Or if you really need a percentage of the parent's height, you would remove the margins and give the div position:absolute in the same way as the img. Then you can use left:41%; top:36%; but you will also need to experiment with the z-indexes a bit to get their stacking order right again.

</div
 
 

Связанный проблема

13  Как центрировать текст внутри якоря  ( How to center text inside anchor tag ) 
Я хочу, чтобы мой якорный тег выглядеть как кнопка, и создала этот стиль jsfiddle <код> watch0 Похоже, как я хочу, но как в центре текста горизонтально...

1  Правильное форматирование ссылки HTML - можно ли два равна внутри одного тега <a>? [Дубликат]  ( Proper html link formatting can two divs be inside of one a tag ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

0  Запустить функцию JavaScript с использованием C #  ( Trigger javascript function using c sharp ) 
Я должен написать класс C #, который получает содержимое HTML-страницы (страница публичная) и запускает функцию JavaScript, которая загружает файл. Моя цель...

1  Как я могу скрыть десятичные числа правильным образом?  ( How do i hide decimal numbers the correct way ) 
Я использую этот метод, чтобы скрыть десятичные числа на странице. код CSS: <код> span { clip-path: inset(0 2.1ch 0 0); } HTML-код: <код> <span>...

1  HTML / CSS - Center Nav Bar переменных размеров  ( Html css center nav bar of variable size ) 
У меня будет навигационный бар, который позволяет пользователю сортировать галерею картинок. Проблема в том, что ширина панели NAV будет варьироваться в завис...

3  Применять курсивый стиль на символ трубы  ( Apply italic style to a pipe symbol ) 
Я пытаюсь сделать символ трубы <код> italic Но он не работает там, где другие шрифты отображаются как курсив, я делаю ничего плохого (в Chrome)? <код> <em>...

0  транзакция внутри контура  ( Transaction inside a for loop ) 
Я хочу запустить транзакцию внутри контура. Мой код: - <код> n==00 Но проблема в том, что после оповещения (перед транзакцией) я напрямую получаю предупр...

0  Как я могу связать изображения Data-SRC на внутреннюю страницу?  ( How can i link data src images to internal page ) 
Это то, что у меня есть на http://www.hairattheritz.com/untitled.html Мне нравится, как он изменил размер для различных размеров экрана, однако я не могу най...

1  Textarea Overflow-X Когда в нее копирование пользователей?  ( Textarea overflow x when a user copy pastes into it ) 
У меня есть текстовая пара с Overflow-X: AUTO; отнесено к этому. Он отлично работает, когда пользователь набирает текст в коробку вручную. Однако, когда польз...

0  SVG D3 круговой контроль  ( Svg d3 circular control ) 
Я пытаюсь сделать контроль, в котором радиальные линии прилипают за пределами круга. Длина каждой линии, прилипающей зависит от значения данных. Короче говоря...

0  Имея проблемы с использованием объема в jQuery  ( Having issues using a scope in jquery ) 
Так что я пытаюсь передать значение переменной FreeMarker ($ {item.uid}) на клик ссылки, чтобы запустить модаль с тем же уникальным значением идентификатора. ...

23  Вопрос с медиа-запросами CSS (Scrollbar)  ( Issue with css media queriesscrollbar ) 
У меня проблемы с CSS Media Query в Firefox. Он работает правильно в Chrome, как я сделал два рав и хотеть прокрутку. Если я уменьшаю размер экрана Firefox до...

0  Возможное решение этой проблемы проектирования?  ( The possible solution to this design issue ) 
Мне нужно знать, как исправить эту проблему в конструкциях форм .. Получение этого в Firefox И это в IE ... Цвет не является проблемой .. Juz Нужно вы...

0  Jquery value изменить жить  ( Jquery value change live ) 
Пожалуйста, обратитесь к этому HTML. <код> <input type="text" name="amount1" value="10" /> <input type="text" name="amount2" value="5" /> <input type="text"...

3  Рисование круга с помощью кинетических js  ( Drawing a circle using kinetic js ) 
Я пытаюсь построить очень базовую покраску, используя каркас kinetic JS. Все все идут хорошо, пока не попытался включить функцию формы, которая позволяет поль...