如何在html中水平定位三个div? [英] How to position three divs in html horizontally?

查看：55
本文介绍了如何在html中水平定位三个div?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在创建一个示例网站，该网站具有三个水平分区.我希望最左边的 div 为 25% 的宽度，中间的为 50% 的宽度，右边为 25% 的宽度，以便这些分区水平填充所有 100% 的空间.

<标题>网站标题<div id="整个东西" style="height:100%; width:100%" ><div id="leftThing" style="position: relative; width:25%; background-color:blue;">左侧菜单

<div id="content" style="position: relative; width:50%; background-color:green;">随机内容

<div id="rightThing" style="position: relative; width:25%; background-color:yellow;">右侧菜单

http://imgur.com/j4cJu

当我执行此代码时，div 会相互重叠.我希望它们并排出现！

我该怎么做?

解决方案

我不会在这类事情上使用浮点数；我宁愿使用 inline-block.

还有几点需要考虑:

这是一种更好的文档格式设置方法:

<头><title>网站标题</title><style type="text/css">* {边距:0;填充:0;}#container {高度:100%;宽度:100%；字体大小:0;}#left, #middle, #right {display: inline-block;*显示:内联；缩放:1；垂直对齐:顶部；字体大小:12px;}#left {宽度:25%；背景:蓝色；}#middle {宽度:50%;背景:绿色；}#right {宽度:25%;背景:黄色；}</风格><身体><div id="容器"><div id="left">左侧菜单</div><div id="middle">随机内容</div><div id="right">右侧菜单</div>

这里有一个 jsFiddle 很好的衡量标准.

I am creating a sample website which has three divisions horizontally. I want the left most div to be 25% width, the middle one to be 50% width, and right to be 25% width so that the divisions fill all the 100% space horizontally.

<html>
    <title>
    Website Title
    </title>

    <div id="the whole thing" style="height:100%; width:100%" >

        <div id="leftThing" style="position: relative; width:25%; background-color:blue;">
            Left Side Menu
        </div>

        <div id="content" style="position: relative; width:50%; background-color:green;">
            Random Content
        </div>

        <div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
            Right Side Menu
        </div>

    </div>
</html>

http://imgur.com/j4cJu

When I execute this code, the divs appear over each other. I want them to appear beside each other!

How can i do this?

解决方案

I'd refrain from using floats for this sort of thing; I'd rather use inline-block.

Some more points to consider:

Here's a better way to format your document:

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

Here's a jsFiddle for good measure.

这篇关于如何在html中水平定位三个div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆