html改变图片大小水平放置,CSS-如何在html中水平放置三个div？-CSDN博客

CSS-如何在html中水平放置三个div？

我正在创建一个水平划分为三个部门的示例网站。我希望最左边的div为25％宽度，中间的div为50％宽度，右边为25％宽度，以便分隔线水平填充所有100％的空间。

Website Title

Left Side Menu

Random Content

Right Side Menu

[http://imgur.com/j4cJu]

当我执行此代码时，div彼此重叠。我希望他们出现在彼此身边！

我怎样才能做到这一点？

6个解决方案

33 votes

我不会在这种情况下使用浮点数；我宁愿使用doctype。

还有几点需要考虑：

内联样式不利于可维护性

选择器名称中不应包含空格

您错过了一些重要的HTML标签，例如doctype和

您未包含doctype

这是格式化文档的一种更好的方法：

Website Title

* {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;}

Left Side Menu

Random Content

Right Side Menu

这是一个很好的衡量方法。

Jezen Thomas answered 2020-02-09T07:49:04Z

21 votes

我知道这是一个非常老的问题。当我使用FlexBox解决此问题时，只需将其发布在此处即可。这是解决方案

display:flex

只需将display:flex添加到容器中即可！不需要浮子。

Maaz Syed Adeeb answered 2020-02-09T07:50:33Z

14 votes

您可以像这样使用浮动元素：

Left Side Menu

Random Content

Right Side Menu

注意溢出：隐藏；在父容器上，这是为了使父容器成长为具有与子元素相同的尺寸(否则，其高度将为0)。

Paul Aldred-Bann answered 2020-02-09T07:50:58Z

10 votes

最简单的方法

我可以看到问题得到了回答，我正在为那些将来有这个问题的人提供这个答案

编写内联css以及所有内部div的ID都是不好的做法，总是尝试使用class进行样式设计。如果您想成为一名专业的Web设计人员，则使用内联css是非常不好的做法。

在你的问题我给了父div的包装器类，并且所有内部div都是css中的子div，您可以使用nth-child选择器调用内部div。

我想在这里指出几点

1-不要使用内联CSS(这是非常糟糕的做法)

2-尝试使用类而不是id，因为如果给定id，则只能使用一次，但是如果使用一个类，则可以使用多次，也可以使用该类设置样式，从而减少编写代码。

Codepen链接为我的答案

[https://codepen.io/feizel/pen/JELGyB]

.wrapper{width:100%;}

.box{float:left; height:100px;}

.box:nth-child(1){

width:25%;

background-color:red;

}

.box:nth-child(2){

width:50%;

background-color:green;

}

.box:nth-child(3){

width:25%;

background-color:yellow;

}

Left Side Menu

Random Content

Right Side Menu

Faizal Munna answered 2020-02-09T07:51:54Z

5 votes

您添加一个

float: left;

调整3个元素的样式，并确保父容器具有

overflow: hidden; position: relative;

这样可以确保浮标占用实际空间。

Website Title

Left Side Menu

Random Content

Right Side Menu

另外请注意，需要从容器中移除宽度：100％和高度：100％，否则第三块将绕到第二行。

NKCSS answered 2020-02-09T07:52:27Z

1 votes

摆脱position:relative;并用float:left;和float:right;代替。

jsfiddle中的示例：[http://jsfiddle.net/d9fHP/1/]

Website Title

Left Side Menu

Random Content

Right Side Menu

MNilson answered 2020-02-09T07:52:52Z