Относительная ширина и отступ на одном элементе - PullRequest
Новая
       18

Относительная ширина и отступ на одном элементе

4 голосов
/ 18 июля 2011

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

Я не могу дать ссылку на сайт (NDA), но я выложил несколько примеров страниц с соответствующими элементами:

НЕПРАВИЛЬНО: http://cruxwire.com/wrong.html ПРАВО: http://cruxwire.com/right.html

То, что у меня есть, это три деления, всплывшие слева. Я пытаюсь добавить к ним отступ (в процентах) и использую target / context = result, а затем * 100 (потому что это процент.)

Моя копия «Отзывчивого веб-дизайна» Этана Маркотта говорит «При настройке гибкого заполнения для элемента ваш контекст - это ширина самого элемента». Я дал элементам div ширину 20%. Поскольку родительский элемент имеет размер 945 пикселей, ширина каждого элемента div составляет 189 пикселей. Я хотел добавить отступ в 20 пикселей, поэтому 20/189 = 0.1058201058201058. Я добавил отступ к каждому div 10.58201058201058%.

В итоге каждому диву присваивается отступ в 100px, а не 20px. В конце концов я понял, что заполнение вычисляется на основе ширины родительского элемента, а не самого div.

Моим решением было поместить дополнительный div вокруг каждого существующего div, чтобы я мог применить ширину к одному и отступ для другого, и это решило проблему.

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

Как я могу это сделать, не добавляя дополнительные div?

Вы можете увидеть код на страницах, ссылки на которые есть в этом сообщении, и я также добавил его ниже.

НЕПРАВИЛЬНО: 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WRONG</title>
<style>
#main { width:945px; margin:0 auto; padding:40px 0; background-color:blue; }
#slideshow { background-color:green; }
.threecolumn { float:left; width:20%; padding:10.58201058201058%; background-color:yellow; } /* 20px/189px */
.slide { position:relative; margin:0 1%; background-color:red; }
p { background-color:white; margin:0; padding:0; }
</style>
</head>
<body>

<div id="main">
    <div id="slideshow">
        <h1>WRONG</h1>
        <div class="threecolumn slide">
            <p>According to Firebug, this element has 100px padding.</p>
        </div>
        <div class="threecolumn slide">
            <p>According to Firebug, this element has 100px padding.</p>
        </div>
        <div class="threecolumn slide">
            <p>According to Firebug, this element has 100px padding.</p>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>
</body>
</html>

RIGHT: 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>RIGHT</title>
<style>
#main { width:945px; margin:0 auto; padding:40px 0; background-color:blue; }
#slideshow { background-color:green; }
.threecolumn { float:left; width:20%; margin:0 1%; background-color:yellow; } 
.slide { position:relative; padding:10.58201058201058%; background-color:red; } /* 20px/189px */
p { background-color:white; margin:0; padding:0; }
</style>
</head>
<body>

<div id="main">
    <div id="slideshow">
        <h1>RIGHT</h1>
        <div class="threecolumn">
            <div class="slide">
                <p>According to Firebug, this element has 20px padding.</p>
            </div>
        </div>
        <div class="threecolumn">
            <div class="slide">
                <p>According to Firebug, this element has 20px padding.</p>
            </div>
        </div>  
        <div class="threecolumn">
            <div class="slide">
                <p>According to Firebug, this element has 20px padding.</p>
            </div>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

</body>
</html>

Ответы [ 3 ]

1 голос
/ 18 июля 2011

Боксовая модель W3 включает отступ в расчетную ширину. То, что вы на самом деле хотите сделать, - это обернуть содержимое, для которого требуется заполнение, в другой элемент div и применить к этому элементу поле, эквивалентное отступу, который вы не можете использовать:

Пример HTML: 

<div id="nav">
    <div class="block" id="left">
        <div>
            <h1>blah blah</h1>
        </div>
    </div>
    <div class="block" id="middle">
        <div>
            <h1>blah blah</h1>
        </div>
    </div>
    <div class="block" id="right">
        <div>
            <h1>blah blah</h1>
        </div>
    </div>
</div>

Пример CSS: 

.block {
    width:33%;
    height:50%;
    position:relative;
    float:left;
    background-color:#CCC;
    /** Instead of applying a 20px padding here... */
}

.block>div {
    margin:20px; /* we apply a 20px margin here */
}

http://jsfiddle.net/AlienWebguy/Yf34X/1/

0 голосов
/ 30 декабря 2013

Вот один из способов сделать это без добавления дополнительных элементов div:

Вы хотите, чтобы отступ составлял приблизительно 20 пикселей. Следовательно, 20 пикселей из общей ширины 945 пикселей = 20/945 x 100 = 2,116402116%

Поэтому, если вы используете этот процент в исходном «неправильном» коде вместо 10,58%, вы получите желаемый эффект. Ниже приведен код, который вы указали для своего «неправильного» примера, только с измененным css.

CSS: 

#main { 
width:945px; 
margin:0 auto; 
padding:40px 0; 
background-color:blue; 
}
#slideshow { 
background-color:green; 
}
.threecolumn { 
float:left; 
width:20%; 
padding:2.116402116%;  /*<<<<<<<<padding is 20px/945px*/
background-color:yellow; 
} 
.slide { 
position:relative; 
margin:0 1%; 
background-color:red; 
}
p { 
background-color:white; 
margin:0; 
padding:0; 
}

HTML: 

<div id="main">
    <div id="slideshow">
        <h1>WRONG</h1>
        <div class="threecolumn slide">
            <p>According to Firebug, this element has 100px padding.</p>
        </div>
        <div class="threecolumn slide">
            <p>According to Firebug, this element has 100px padding.</p>
        </div>
        <div class="threecolumn slide">
            <p>According to Firebug, this element has 100px padding.</p>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>
0 голосов
/ 31 января 2013

Вы правы, предполагая, что target / context = результат, но это включает в себя ширину, отступы и поля элемента.

Я сделал кодовую ручку, чтобы вы могли видеть, как она работает - http://codepen.io/justincavery/pen/dtusa

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

.wrapper {
  margin: 0 auto;
  width: 1000px;
}
#main { 
  width:100%;
  padding:40px 0; 
  background-color:blue; 
  float:left
  }
.pixeled { 
  float:left;
  background-color:green;
  width: 400px;
  margin: 25px;
  padding: 25px;
}
.percentaged { 
  float:left; 
  width:40%; 
  padding:2.5%; 
  background-color:yellow;
  margin:2.5%;
}


<div class="wrapper">
<div id="main">
   <div class="pixeled">
       <div class="inner">
     This is content
  </div>     
  </div>
  <div class="percentaged">
    <div class="inner">
     This is conent
  </div>   
  </div>
</div>

</div>
...