下面是它的意思：

|图片|菜单项1 /菜单项2 /菜单项3 |图像|

我需要将左侧图像固定在屏幕左侧右侧图像必须固定在屏幕右侧菜单项必须位于中间列的中心。

这样，当我调整屏幕大小时，左右菜单会保持原样，中间列会相应调整大小。

任何人都能告诉我这种风格如何吗？

Answer 1

这是一种方式：

CSS

.imgleft {
   position:absolute;
   left: 0px;
   top: 0px;
}
.imgright {
   position:absolute;
   right: 0px;
   top: 0px;
}
.menuhead {
    position: relative;
    text-align: center
    min-width: 320px;     /* so menuhead not shrink more than links/images fit without overlap  */
}

HTML

<div class='menuhead'>
    <img class='imgleft' src="" />

    Link1 | Link2

    <img class='imgright' src="" />
</div>

这样做有很多选择。其他方法是让左右对齐多个背景图像或使用div而不是img's或使用以下内容添加图像：在/之前的psuedo类或....（其中一些不被旧浏览器支持）

要知道哪个更好，需要审查整个布局概念。

Answer 2

<强> CSS：

    .wrap { overflow: hidden; }

    .leftImg {
        width: 200px;
        float: left;
    }

    .nav {
        display: block;
        margin-left: 210px;
        margin-right: 210px;
    }

    .rightImg {
        width: 200px;
        float: right;
    }

<强> HTML：

<div class="wrap">
    <div class="rightImg"></div>
    <div class="leftImg"></div>
    <div class="nav"></div>        
</div>

DEMO

CSS到中心菜单，图像固定在屏幕左侧，一个图像固定在屏幕右侧

下面是它的意思：

|图片|菜单项1 /菜单项2 /菜单项3 |图像|

2 个答案: