Mam element div w innym elemencie div takim takim:

<div id="container">
  <div id="inner" style="width:50%;"> 
    some text
  </div>
</div>

Wewnętrzny div obejmuje teraz połowę szerokości pojemnika. Chcę ustawić mój wewnętrzny div, aby było 1/3 pustej przestrzeni od lewej i 2/3 od prawej. Innymi słowy 1/6 szerokości pojemnika z lewej i 2/6 z prawej strony. Chcę, aby wewnętrzny div był zawsze taki, nawet jeśli zmienisz rozmiar kontenera. Jak mam to zrobić?

0
Tomáš Roun 14 sierpień 2014, 00:49

4 odpowiedzi

Najlepsza odpowiedź
#inner {
    margin-left: 16%;
}
0
Hashem Qolami 13 sierpień 2014, 20:59

Ograniczenie zarówno lewej, jak i prawej marginesie z względnymi wartościami (procentami) w moim preferowanym podejściu, tak że każda zmiana rzutni zostaną uhonorowane - w przeciwieństwie do posiadania tylko otwartego marginesu lub za pomocą wyściółki i wpływają na wewnętrzną zawartość.

#container {
  border: 1px solid red
}

#inner {
  height: 100px;
  border: 1px solid blue;
  margin: 20px 60% 20px 30%;
}

Przykład przez jsfiddle.

1
Zach B 13 sierpień 2014, 21:01

Albo możesz spróbować z wyściółką CSS, taką:

#container {  
    border : 1px solid red;  
    padding : 10px 30% 10px 10%;  
}  
#inner {  
    border : 1px solid green;
}
0
Mariepw 13 sierpień 2014, 20:56

margin-left:16% powinien działać

<div id="container" style="width:500px;height:200px;background-color:#CCC">
  <div id="inner" style="width:50%;background-color:#555;margin-left:16%"> 
    some text
  </div>
</div>

Przykład tutaj: http://jsbin.com/somapagujawi/1/edit?htmlionooutput .

0
Dave 13 sierpień 2014, 21:04