Question

我正在尝试创建一个“Meet the Team”内部网页面，但我似乎无法找到最佳方法。所以，首先，这是我的代码;

`<html>
<head>
    <h1>Meet the Team</h1>
</head>
<body>

<h3>Joe Bloggs</h3>

<div id="joe" style="position:relative;width:300px;height:350px;background-color:#959595;"> 
  <p>Test paragraph</p>

</div>

<h3>John Smith</h3>

<div id="john" style="position:relative;width:300px;height:350px;background-color:#959595;"> 
  <p>Test paragraph</p>

</div>

<h3>Jane Doe</h3>

<div id="jane" style="position:static;top:50%;float:right;width:300px;height:350px;background-color:#959595;"> 
  <p>Test paragraph</p>

</div>


</body>
</html>`

现在，基本上设置为亲戚的'divs'都只是在页面上，但我想要连续3个然后在列中显示人名，然后是他们角色的描述。所以..

123
456个
789

我尝试过使用其他位置元素，例如绝对值，但似乎并不能将div放在一起。我也想知道在div中包含<h3>但没有背景颜色的最佳方法。最后，我知道内联CSS可能不是在这里使用的最好的东西，但我希望每个div的背景颜色略有不同。

Answer 1

你在找什么？

#team{
	background-color: #e7eaea;
	width: 100%;
}
#team > div{
	background-color: #a0c3ce;
	margin: 1%;
	width: 31%;
	float: left;
}
h1, h3{
	width: 100%;
	text-align: center;
}

<html>
<head>
    <title>Meet the Team</title>
</head>
<body>
	<h1>Meet the Team</h1>
	<div id="team">
		<div id="joe">
			<h3>Joe Bloggs</h3>
			<p>Test paragraph</p>
		</div>

		<div id="john"> 
			<h3>John Smith</h3>
			<p>Test paragraph</p>
		</div>

		<div id="jane"> 
			<h3>Jane Doe</h3>
			<p>Test paragraph</p>
		</div>
	</div>
</body>
</html>

Answer 2

你需要做两件事：

添加每个div的

display:inline-block;

其次，制作一个css类并将其用于每个div而不是将css复制到所有div中是很好的。

例如

<style>
    .box{width:300px;height:350px;background-color:#959595;display:inline;}
</style>

在HTML中，

<div id="joe" class="box">some content here</div>
<div id="john" class="box">some content here</div>
<div id="jane" class="box">some content here</div>

Answer 3

这是另一个解决方案

＆＃13;

.info {
  display: inline-block;
  width: 32%;
  height: 300px;
  margin-top: 5px;
  text-align: center;
  background: orange;
}
.info h3 {
  display: block;
  background: lightgreen;
  margin: 0;
}
.info p{
  display: block;
  padding-top: 10px;
  margin: 0;
}

＆＃13;

<h1>Meet the Team</h1>

<div id="joe" class="info"> 
  <h3>Joe Bloggs</h3>
  <p>Test paragraph</p>
</div>
<div id="john" class="info"> 
  <h3>John Smith</h3>
  <p>Test paragraph</p>
</div>
<div id="jane" class="info"> 
  <h3>Jane Doe</h3>
  <p>Test paragraph</p>
</div>
<div id="john" class="info"> 
  <h3>John Smith</h3>
  <p>Test paragraph</p>
</div>
<div id="jane" class="info"> 
  <h3>Jane Doe</h3>
  <p>Test paragraph</p>
</div>

＆＃13;

Answer 4

在每个display:inline-block;的风格

中添加<div>

Answer 5

有很多方法可以做你想要的。一个是创建div＆＃39;行＆＃39;包装每行3个div：

<div class="row" style="width: 100%">
    <div class="col" style="width: 33%; float: left">1</div>
    <div class="col" style="width: 33%; float: left">2</div>
    <div class="col" style="width: 33%; float: left">3</div>
</div>

<div class="row"  style="width: 100%">
    <div class="col"  style="width: 33%; float: left">4</div>
    <div class="col"  style="width: 33%; float: left">5</div>
    <div class="col"  style="width: 33%; float: left">6</div>
</div>

每个＆＃39; col＆＃39; element应该是容器的一小部分（在这种情况下为33％）。 Yo可以更好地为行和列定义样式：

＆＃13;

.row {
  width: 100%;
}
.col {
  width: 33%;
  float: left;
}

＆＃13;

<div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
</div>

    <div class="row">
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
</div>

＆＃13;

Answer 6

这可以通过以下方式解决：

#team {
  width: 100%;
}

#team > div {
  width: 31%;
  margin: 1%;
  float: left;
  background-color:#959595;
}

<html>
<head>
    <h1>Meet the Team</h1>
</head>
<body>
    <div id="team">
        <div id="joe">
            <h3>Joe Bloggs</h3>
            <p>Test paragraph</p>
        </div>
        <div id="john">
            <h3>John Smith</h3>
            <p>Test paragraph</p>
        </div>
        <div id="jane">
            <h3>Jane Doe</h3>
            <p>Test paragraph</p>
        </div>
    </div>
</body>
</html>

但是不是应用css，你可以使用已经以更容易的方式实现的twitter bootstrap。

您可以从以下代码中获取帮助：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <h1>Meet the Team</h1>
</head>
<body>
    <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-4">
            <h3>Joe Bloggs</h3>
            <p>Test paragraph</p>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-4">
            <h3>John Smith</h3>
            <p>Test paragraph</p>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-4">
            <h3>Jane Doe</h3>
            <p>Test paragraph</p>
        </div>
    </div>
</body>
</html>

在此代码中，只创建了一行，但您可以创建多行并将其划分为列。

如需进一步帮助，请参阅[1]：https://getbootstrap.com/examples/grid/

如何制作div并排以及下页

6 个答案: