Propozycja CSS maks. Prawo lub obejście?

Question

Czy planujesz dodać to do CSS?

min-right:10% ; 
max-bottom:100px ; ... 

coś

<div style="min-left:1000px; min-right:10%; max-left:1200px; 
      position:fixed" ></div> 

Czy istnieje obejście zastosowania dzisiaj? Odpowiedzi mogą obejmować JavaScript, jQuery wtyczki, itp

Dla niektórych tle:

Naszym stałym div w powyższym przykładzie woli w 1280 okiennej szerokości być wyjściowej na poziomie 10%/128px z prawej strony, ale nie wychodząc wcześniej niż 1000 pikseli od lewej, a więc co najwyżej 152 piksele szerokości, ograniczone przez poziome pozycje 1000px i 1152px z równą przerwą do tych znaczników, jeśli ten div znajduje się w innym, z wyśrodkowanym wyrównaniem. - Jeśli zamiast tego spróbujesz <div style=”right:10%;left;1000px; max-width: calc(90%-1000); position:fixed, nie stanie się to samo, ale maksymalna szerokość zostanie wymuszona zawsze, a nasz div będzie musiał być jednocześnie: 1000px od lewej i 10% od prawej, nawet jeśli zawartość faktycznie "chce" po prostu mniejszej szerokości pikseli ...

Aby wyjaśnić, dlaczego teraz konieczne jest również max-left:1200px: Jeśli szerokość okna będzie większa, na przykład 1600px, to oczywiście znowu min. szczelina po prawej stronie okna będzie wynosić 10%/160 pikseli, a po lewej 1000, więc maksymalna szerokość elementu div spowoduje 440px, ale co, jeśli ma dziś tylko 100px? Następnie dodatkowo chcemy się upewnić, że zaczyna się od 1000 do 1200 od lewej, a nie tylko 10% od prawej, nawet jeśli dziedziczone wyrównanie powinno być "wyśrodkowane" lub "w prawo", a element div zawierający 10px treści, które nie będą skutkować w tym jest w 1235px odległym od lewej lub nawet 1430px, ale nie najwyżej 1200px.

Answer 1

1. Nie używać bezwzględnych pozycjonowanie wyjątkiem sytuacji, gdy Twój poziom w CSS jest zaawansowany. Przepis na katastrofę i treści dotyczące innych treści.
   • Informacje na temat wartości teraz użytkowych wyświetlaczu jak inline-block i table-cell
   • Dowiedz o obrocie oczywiście, i clear nieruchomość
   • Dowiedz się o co clearfix a różnica jest z właściwością clear. Implementation of clearfix
   • clip() można stosować tylko na absolutnie pozycjonowanych elementów, więc jest to istotne tutaj
2. Dowiedz się o chłodnym sztuczki z absolute positioning (the bonus tip part).
3. Dowiedz się o min-width, max-width, min-height i max-height.
   • min-height jest przydatna, gdy obraz tła nie powinny być przycięte nawet bez wystarczającej ilości treści
   • max-width i min-width są użyteczne dla układów płynów, jest czuły, bez konieczności zapytań i pułapki mediów, szerokości w em s itd
4. obrazy tła można teraz sterować za pomocą CSS3: background-size, etc Zobacz E. Weil 'standardista' website

nie ma PLA ns dodawania właściwości, o których wspomniałeś, chociaż jest pewna wartość, która może ci pomóc. Zobacz MDN calc() (i caniuse.com dla zgodności ...)

Answer 2

OK! załóżmy, że masz szerokość div równą 400 pikseli.

+----------------------+ 
|      | <div id="main"> 
+----------------------+ 

A ty chcesz dać min-left 50px wewnątrz DIV nowy div szerokość 300 pikseli.

+----------------------+ 
| +------+   | 
| |  |   | <div id="left"> 
| +------+   | 
+----------------------+ 

Co jeśli chcesz to div max-left 100px. To by wyglądało tak.

+----------------------+ 
|  +------+  | 
|  |  |  | <div id="left"> 
|  +------+  | 
+----------------------+ 

A co jeśli stosuje margin: 0 auto; do tego div. To naprawdę zarządza treścią dokładnie tak, jak chcesz, tak/nie: no. Gdy podasz margines: 0 100px; lub coś podobnego będzie zarządzać jako chcesz, tak/nie: tak. Tak, podobnie jak sposób, w jaki robimy css, wszystko jest napisane w głębokim myśleniu i nie jest potrzebne, aby dać min-left lub coś podobnego do ciebie. I jest wiele sztuczek, które możesz robić tak, jak chcesz.