将两个 div 对齐到一个 div 的右侧

我正在为某人制作一个网站，我的html/css有点生疏，我真的需要在这个网站上进行侧面导航。

我有侧边栏（#menu），然后我想在 #menu 的左侧有两个div（#container 顶部 #slider）。

我该怎么做？代码如下，您可能还想知道 #slider 是我在线获得的照片滑块：

<style type="text/css">
body {font-family: Arial; background-color: #eeeeee; background-image: url(Images/bg.png); background-position: bottom; background-repeat: repeat-x; height: 100%; background-attachment: fixed; color: #333333;}
div#menu {float:left;margin-left: 25%; margin-right:25%; font-size: 40px; padding-top: 10px; padding-bottom: 10px; width: 10%; border: 1px solid #cccccc; text-align: center; word-spacing: 15px; background-color: #ffffff; margin-top: 10px;}
div#container {padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; margin-left: 25%; margin-right: 25%; width: 40%; border: 1px solid #cccccc; text-align: left; background-color: #ffffff; margin-top: 10px;}
a {color: #666666; text-decoration:none;}
a:hover {color: #333333; text-decoration: underline;}
ul, li {list-style-type: none;}
#slider {width:600px;height:300px; margin-left: 25%; margin-right: 25%; margin-top: 10px;}
div.navBulletsWrapper {display:none;}
</style>
</head>
<body>
<div id="menu">
<li><a href="index.htm">Home</a></li>
<Br>
<li><a href="about.htm">About</a></li>
<br>
<li><a href="products.htm">Products</a></li>
<Br>
<li><a href="news.htm">News</a></li>
<br>
<li><a href="contact.htm">Contact</a></div></li>
<div id="slider">
        <img src="1.jpg" />
        <img src="2.jpg" />
        <img src="3.jpg" />
    </div>
<div id="container">
Placeholder text.
</div>

让我们暂时

忘记你的非验证html，尽管有很多话要说。

您的主要问题是缺乏结构，如果滑块和容器位于公共div 内，您会发现它们更容易对齐。您的代码应如下所示（示意图）：

<div id="menu">
  <ul>
    <li><a href="index.htm">Home</a></li>
    <li><a href="about.htm">About</a></li>
    <li><a href="products.htm">Products</a></li>
    <li><a href="news.htm">News</a></li>
    <li><a href="contact.htm">Contact</a></li>
  </ul>
</div>
<div id="main">
   <div id="slider">
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
   </div>
   <div id="container">
     Placeholder text.
   </div>
</div>

这样，您可以根据需要（向右或向左）#menu 和 #main 浮动。

关于代码中的其他问题，始终将 li 包装在 ul 或 ol 中，切勿使用 br 来制作垂直空间，更喜欢使用边距或填充。HTML仅用于文档结构，CSS负责可视化部分。

首先清理你的 HTML。如果您不确定要修复什么，请通过 W3C 验证器运行它。http://validator.w3.org/#validate_by_input

你想要菜单内的滑块和容器吗？如果是这样，那么您过早关闭了第一个div。此外，我不确定您的利润率百分比是否会给您带来您想要的感觉。

请更具体地说明您的问题并修复您的标记。

相关内容

最新更新

热门标签：