0
コンテンツブロックがで、ムービーの中央にムラがあります。です。ブラウザウィンドウを縮小するとき、コンテンツブロックはサイズを維持し、まず周囲の空間を使い切る必要があります。間隔の不均等な比率を維持する 'スケールラスト'コンテンツブロック
スペースその比率を維持する必要があり縮小しながら：
┌───────┬──────────────────────┬───┐
│ │Lorem ipsum dolor sit │ │
│ │amet, consetetur │ │
│ │sadipscing elitr, sed │ │
│ │diam nonumy eirmod │ │
│ │tempor invidunt ut │ │
│ │labore et dolore magna│ │
│ │aliquyam erat, sed │ │
│ │diam voluptua. │ │
└───────┴──────────────────────┴───┘
元の幅。少し縮小
┌──┬──────────────────────┬┐
│ │Lorem ipsum dolor sit ││
│ │amet, consetetur ││
│ │sadipscing elitr, sed ││
│ │diam nonumy eirmod ││
│ │tempor invidunt ut ││
│ │labore et dolore magna││
│ │aliquyam erat, sed ││
│ │diam voluptua. ││<- - -|
└──┴──────────────────────┴┘
。まだスペースが残っています。さらにスケールダウン
┌───────────────┐
│Lorem ipsum │
│dolor sit amet,│
│consetetur │
│sadipscing │
│elitr, sed diam│
│nonumy eirmod │
│tempor invidunt│
│ut labore et │
│dolore magna │
│aliquyam erat, │
│sed diam │
│voluptua. │<- - - - - - - - -|
└───────────────┘
。今すぐコンテンツが急落する。
は私がcalc()と@mediaクエリを使用して解決策を考え出した： http://embed.plnkr.co/mSucZO7pw9wo9K7sZxy6/ （希望の動作を確認するために、プレビューウィンドウのサイズを変更）
<!DOCTYPE html>
<html>
<head>
<style>
body, p {
margin: 0;
padding: 0;
}
@media (max-width: 300px) {
.container {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 301px) {
.container {
margin-left: calc((100% - 300px) * 0.6666);
margin-right: calc((100% - 300px) * 0.3333);
}
}
.wrapper {
background: #eee;
width: 100%;
position: relative;
}
.content {
max-width: 300px;
height: 500px;
background: #ddd;
}
.content p {
font-family: sans-serif;
padding: 10px 18px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</body>
</html>
は、他のいくつかの純粋なCSS/HTMLがあります解決策が必要ない解決策calc()？私の心配はブラウザとの互換性です...
あなたは、それを指摘して感謝ですね。私は質問にコードを追加しました。 –
問題はありませんが、とにかく、私の答えはあなたに必要なものを与えてくれると思います。 –
あなたのソリューションは疑似要素ですばらしいです。私はhttp://caniuse.comで見ることができますから、それはまた、より良いブラウザのサポートをしています。それでも、IE 8以降では動作しません。 –