0

2 つの列を横に貼り付け、それぞれがピクセル単位の正確な幅 (この場合は 30px) で、その間に残りのスペースを埋める別の div を配置したいと考えています。

|-----------100%-----------|
|30px || remaining  ||30px |

+-----++------------++-----+
|     ||            ||     |
|     ||            ||     |
|   1 ||     2      ||  3  |
|     ||            ||     |
+-----++------------++-----+
  |                     |
  |                     -- float:right
  ---- float:left

純粋なcssだけでこれを達成するにはどうすればよいですか?

4

4 に答える 4

1

左右のdivをフロートさせる以外に何もする必要はありません。間に配置したdivは、残りのスペースを自動的に埋めます。

<div class="right"></div>
<div class="left"></div>
<div class="center"></div>​


.right{
float:right;
background-color:yellow;
height:50px;
width:30px;
}
.left{
float:left;
background-color:yellow;
height:50px;
width:30px;
}
.center{background-color:green;height:100%;height:50px;}

フィドル： http： //jsfiddle.net/calder12/55dza/

于 2012-11-13T13:43:29.003 に答える
1

この表を使用する

<table border="1">
    <tr>
        <td class="fixed">
            left
        </td>
        <td class="remaining">
            middle
        </td>
        <td class="fixed">
            right
        </td>
    </tr>
</table>​

このCSSを試してください

table { width: 100%; }
.fixed { width: 30px; }
.remaining { width: auto; }​

jsFiddle

于 2012-11-13T13:51:34.980 に答える
1

中央の div は絶対に配置でき、両側から 30px のオフセットがあります。

.container{
   position:relative;
   width:600px;
   height: 400px;
}
.center{
    position:absolute;
    left:30px;
    right:30px;
    height: 100%;
}

これにより、コンテナ div の 100% を常に占有する div が作成されますが、両側に 30 ピクセルが残ります。

于 2012-11-13T13:39:35.883 に答える
0

#left { background-color: Red; width: 30px; height: 500px; float: left; }

#middle { background-color: blue; height: 500px; }

#right { background-color: Red; width: 30px; height: 500px; float: right; }

HTMLで、左のdiv、次に右のdiv、次に中央のdivを配置します。

于 2012-11-13T13:43:54.967 に答える