Question

是否有一种CSS方法可以使父div与所有div一起放在其中。像这样：

+--------------------------------------------------+
|               DIV                                |
|                                                  |
|  +---------+    +---------+    +---------------+ |
|  |         |    |         |    |               | |
|  |         |    |         |    |               | |
|  |   DIV   |    |  DIV    |    |   DIV         | |
|  |         |    |         |    |               | |
|  |         |    |         |    |               | |
|  +---------+    +---------+    +---------------+ |
|                                                  |
|                                                  |
|                                                  |
|                                                  |
+--------------------------------------------------+


+---------------------------------------+
|                 DIV                   |
|  +-----------+    +---------------+   |
|  |           |    |               |   |
|  |           |    |               |   |
|  |           |    |               |   |
|  |   DIV     |    |     DIV       |   |
|  |           |    |               |   |
|  |           |    |               |   |
|  |           |    |               |   |
|  |           |    |               |   |
|  +-----------+    +---------------+   |
|                                       |
+---------------------------------------+

最后，我希望水平居中父div。因此，我必须将子div的总宽度作为父div的宽度。我将使用display：table和margin：0 auto对父div进行居中。

任何想法？

谢谢！

Answer 1

运行下面的代码段，看看我根据您提供的图片创建了类似的布局

使用完全响应的flexbox，一切都居中，一切都可以调整。

父div也是水平居中的。

* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100vw;
  height: 100vh;
}
.container {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.parent_one,
.parent_two {
  display: flex;
  background-color: blue;
  height: 40%;
  justify-content: space-around;
  align-items: center;
}
.parent_one {
  width: 60%;
}
.parent_two {
  width: 30%;
}
.child {
  background-color: yellow;
  width: 30%;
  height: 90%;
}

<div class="container">
  <div class="parent_one">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>

  <div class="parent_two">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Answer 2

试试这个。我想这会对你有帮助。试试这段代码。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
 div.parent{
  width: auto;
  height: auto;
  border:1px solid black;
  padding: 2%;
  position:absolute;
 }

 div.childone{
  width: 300px;
  height: 400px;
  margin:10px;
  background-color: orange;
 }

 div.childtwo{
  width: 300px;
  height: 200px;
  margin: 10px;
  background-color: red;
 }


</style>
<body>

<script type="text/javascript">
  var one = "<div class='childone'></div>";
  var two =  "<div class='childtwo'></div>";

  documemnt.write
</script>

<div class="parent">
  <div class="childone"></div>
  <div class="childtwo"></div>
</div>
  
</div>


</body>
</html>

Answer 3

以下是使用CSS3翻译属性的示例。

注意：子div将＆＃34; line-break＆＃34;在小屏幕上。

＆＃13;

.parent {
  display: inline-block;
  margin-left: 50%;
  padding: 20px;
  background-color: lightblue;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.child1 {
  display: inline-block;
  width: 150px;
  height: 100px;
  background-color: lightgreen;
}
.child2 {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: orange;
}

＆＃13;

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

＆＃13;

Answer 4

以％为单位使用所有div的宽度，使其适合任何设备宽度。使父div宽度为100％，子宽度相应。

Answer 5

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
	width: 100%;
}
.span_2_of_3 {
	width: 66.1%;
}
.span_1_of_3 {
	width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { margin: 1% 0 1% 0%;}
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

<div class="section group">
	<div class="col span_1_of_3">
	This is column 1
	</div>
	<div class="col span_1_of_3">
	This is column 2
	</div>
	<div class="col span_1_of_3">
	This is column 3
	</div>
</div>

Div与div里面的div一样宽

5 个答案: