1 
<style type="text/css">
html, body {
margin: 0;
padding: 0
}

.column1
{
position:absolute;
left:0;
top:0;
width:100px;
background-color:black;
}
.column2
{
position:absolute;
left:100px;
right:100px;

background-color:gray;
}

.middle {

min-width:900px;
}

.column3
{
position:absolute;
right:0;
top:0;
width:100px;
background-color:black;
}

#container
{

text-align: center; 
width:100%;
}

.clearfix 
{
position:relative;
display: inline-block; 
}
</style>

<div id="container" class="clearfix">
  <div class="column1">left</div>
  <div class="column2">
  <div class="middle">
  middle
  </div>
  </div>
  <div class="column3">right</div>
</div>

中央の列の最小幅が可能になるかどうか疑問に思っていたので、右側の列がそのまま画面にくっつきますが、中央の列が900pxになるまで。それよりも小さい場合、ウィンドウのサイズを水平方向に小さく変更すると、右側の列が切り取られます。

これはcssのみで可能ですか？

本当にありがとう！

4

1 に答える 1

5

絶対配置された要素は隣接する要素の影響を受けないため、中央の幅で右の列に影響を与えることはできません。

ただし、 divをmin-width:1100px配置するだけで簡単にこれを行うことができます。#container

于 2012-05-13T20:32:02.507 に答える