Html 如何制作并排的div，以及如何在页面上进行下去_Html_Css

Html 如何制作并排的div，以及如何在页面上进行下去

html css

Html 如何制作并排的div，以及如何在页面上进行下去,html,css,Html,Css,我试图创建一个“与团队会面”的内部网页，但我似乎无法找到最好的方法。所以，首先，这是我的代码 `<html> <head> <h1>Meet the Team</h1> </head> <body> <h3>Joe Bloggs</h3> <div id="joe" style="position:relative;width:300px;height:350px;backgroun

我试图创建一个“与团队会面”的内部网页，但我似乎无法找到最好的方法。所以，首先，这是我的代码

`<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>`

`
会见团队
乔·布洛格斯
测试段
约翰·史密斯
测试段
无名氏
测试段
`

现在，基本上，当设置为relative时，“div”都只是沿着页面向下移动，但我希望在一行中有3个，然后在列中向下移动，这将显示人员名称，然后是他们角色的描述。所以

123
456
789

我尝试过使用其他的位置元素，比如绝对位置，但是将div并排放置似乎不起作用。我还想知道在div中包含

但不包含背景色的最佳方法。最后，我知道这里使用内联CSS可能不是最好的，但我希望每个分区的背景颜色略有不同。

add

display:inline block

的风格中，这就是你想要的吗

#团队{
背景色：#e7eaea；
宽度：100%；
}
#小组>分区{
背景色：#a0c3ce；
利润率：1%；
宽度：31%；
浮动：左；
}
h1，h3{
宽度：100%；
文本对齐：居中；
}

会见团队
会见团队
乔·布洛格斯
测试段
约翰·史密斯
测试段
无名氏
测试段
您需要做两件事：
加入每个div的
display:inline-block;

其次，创建一个css类并对每个div使用它，而不是将css复制到所有div中，这是很好的
比如说
<style>
    .box{width:300px;height:350px;background-color:#959595;display:inline;}
</style>


.box{宽度：300px；高度：350px；背景色：#9595；显示：内联；}

在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>

这里有一些内容
这里有一些内容
这里有一些内容
这里还有一个解决方案

.info{
显示：内联块；
宽度：32%；
高度：300px；
边缘顶部：5px；
文本对齐：居中；
背景：橙色；
}
.info h3{
显示：块；
背景：浅绿色；
保证金：0；
}
.info p{
显示：块；
填充顶部：10px；
保证金：0；
}
与团队会面
乔·布洛格斯
测试段
约翰·史密斯
测试段
无名氏
测试段
约翰·史密斯
测试段
无名氏
测试段
有很多方法可以满足您的需求。一种是创建div“rows”来包装每行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>


1.
2.
3.
4.
5.
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>

#团队{
宽度：100%；
}
#小组>分区{
宽度：31%；
利润率：1%；
浮动：左；
背景色：#9595；
}
会见团队
乔·布洛格斯
测试段
约翰·史密斯
测试段
无名氏
测试段

但是，您可以使用twitter引导，而不是应用css，twitter引导已经以一种更简单的方式实现了这一点
您可以从以下代码获取帮助：
<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]：
，否则我不确定您想要得到什么。截图（速写）可能会有帮助。这正是我想要的！但我确实希望在每一行之间有一个小的空间，然后，我该怎么做下面的另一行，等等？我没有试过使用Float元素！尝试simplegrid.css
，使用3列3行。您可能会按照Jimmy的建议使用标准css。如果您想在div之间留出一些空间，请查看边距和填充。一个快速的谷歌搜索应该会给你大量的信息。谢谢你的帮助，真的很有用！这就是我想要的！非常感谢，谢谢！我知道我做这件事的方式无论如何都不是最好的做法！非常感谢。欢迎，我想建议，即使它只有一行代码，但尽量按照标准执行。