列相同的高度（列的一部分）+引导程序
我试图找出如何使我的列的一部分与列中的其他部分具有相同的高度。一张图片澄清：
从数据中我还有另一列。整页是这样的：
我的HTML看起来像这样：
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="contacts">
<h2>Business Contacts</h2>
<div class="infomation">
<div class="col-md-6">
<h3>Industry</h3>
<div class="name">Joris<br> <span>Vuerstaek</span></div>
<div class="mail"><a href="mailto:joris.v@vkgroup.be">joris.v@vkgroup.be</a></div>
</div>
<div class="col-md-6">
<h3>Public Space</h3>
<div class="name">Wouter<br> <span>Verhaegen</span></div>
<div class="mail"><a href="mailto:wouter.v@vkgroup.be">wouter.v@vkgroup.be</a></div>
</div>
<div class="col-md-6">
<h3>Buildings</h3>
<div class="name">Dirk<br> <span>Slabbinck</span></div>
<div class="mail"><a href="mailto:dirk.s@vkgroup.be">dirk.s@vkgroup.be</a></div>
</div>
<div class="col-md-6">
<h3>Healthcare</h3>
<div class="name">Kenneth<br> <span>Groosman</span></div>
<div class="mail"><a href="mailto:kenneth.g@vkgroup.be">kenneth.g@vkgroup.be</a></div>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<div class="addresses">
<h2>Belgium</h2>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Itech Incubator 2<br>
rue Auguste Piccard 48<br>
B - 6041 Charleroi
</div>
<div class="numbers">
<span>T</span> +32 71 15 91 30<br>
<span>E</span> <a href="mailto:valerie.t@vkgroup.be">valerie.t@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Brugsesteenweg 210<br>
B - 8800 Roeselare
</div>
<div class="numbers">
<span>T</span> +32 51 26 20 20<br> <span>F</span> +32 51 26 20 21<br>
<span>E</span> <a href="mailto:roeselare@vkgroup.be">roeselare@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Europa Building<br>
Avenue Clemenceau 87<br>
B - 1070 Brussels
</div>
<div class="numbers">
<span>T</span> +32 2 414 07 77<br>
<span>F</span> +32 2 414 04 98<br>
<span>E</span> <a href="mailto:bxl@vkgroup.be">bxl@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Axxes Business Park<br>
Guldensporenpark<br>
Building A - n° 4<br>
B - 9820 Merelbeke
</div>
<div class="numbers">
<span>T</span> +32 9 210 31 50<br>
<span>F</span> +32 9 210 31 59<br>
<span>E</span>
<a href="mailto:gent@vkgroup.be">gent@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
</div>
<div class="addresses">
<h2>Vietnam</h2>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Pullman Hanoi, C21, Level 5<br>
40 Cat Linh, Dong Da District<br>
Hanoi
</div>
<div class="numbers">
<span>T</span> +84 4 3736 9097<br> <span>E</span> <a href="mailto:vietnam@vkgroup.be">vietnam@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="information">
<div class="address">
Harbour View Tower, Level 13<br>
35 Nguyen Hue, District 1<br>
Ho Chi Minh City
</div>
<div class="numbers">
<span>T</span> +84 8 3512 2051<br>
<span>E</span>
<a href="mailto:vietnam@vkgroup.be">vietnam@vkgroup.be</a>
</div>
<a href="#" class="direction">Directions</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我所做的就是给我的div一个固定高度为104px的类地址。但问题出在地址长度超过104px的第二部分。我怎样才能轻松解决这个问题？
1 个答案:
答案 0 :(得分：0)
Nielsv ，你好。看看 Fiddle
这对你在这里所做的事情有帮助吗
我为地址和数字类提供了设定的高度。
也使用行来帮助处理布局。
您的越南标题在堆栈中给了您一个小问题，因此我将每个国家/地区放在他们自己的行中。
我调整了比利时布局的大小，因此它们是两个并排的。因为它有它自己的行
我刚刚添加了边框顶部/底部线条，以帮助在此处获得更好的视图。你可以删除它们
当调整大小时它看起来没问题，但你可能想要调整它。
根据你在这里的内容，我可能会在320px处添加另一个较小的媒体断点并将每个断点设置为全宽。记住Bootstrap有帮助，但通常添加一些这样的自定义CSS也有帮助。
希望这可以让你在这里走上正轨。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.space {
margin-top: 2%;
margin-bottom: 2%;
}
.information {
margin-bottom: 2%;
}
.contact {
height: 190px;
}
.address {
height: 104px;
border-top: 1px solid #999;
}
.numbers{
height: 104px;
border-bottom: 1px solid #999;
}
.direction{
line-height: 30px;
border-bottom: 1px solid #999;
}
.bg-country {
background-color: aliceblue;
padding-left: 2%
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 space"></div>
<div class="container">
<div class="row col-xs-12 col-md-5">
<div class="contacts">
<h2>Business Contacts</h2>
<div class="infomation">
<div class="col-xs-6 col-md-6 contact">
<h3>Industry</h3>
<div class="name">Joris<br> <span>Vuerstaek</span></div>
<div class="mail"><a href="mailto:joris.v@vkgroup.be">joris.v@vkgroup.be</a></div>
</div>
<div class="col-xs-6 col-md-6 contact">
<h3>Public Space</h3>
<div class="name">Wouter<br> <span>Verhaegen</span></div>
<div class="mail"><a href="mailto:wouter.v@vkgroup.be">wouter.v@vkgroup.be</a></div>
</div>
<div class="col-xs-6 col-md-6">
<h3>Buildings</h3>
<div class="name">Dirk<br> <span>Slabbinck</span></div>
<div class="mail"><a href="mailto:dirk.s@vkgroup.be">dirk.s@vkgroup.be</a></div>
</div>
<div class="col-xs-6 col-md-6">
<h3>Healthcare</h3>
<div class="name">Kenneth<br> <span>Groosman</span></div>
<div class="mail"><a href="mailto:kenneth.g@vkgroup.be">kenneth.g@vkgroup.be</a></div>
</div>
</div>
</div>
</div> <!--end row Business Contacts-->
<div class="row col-xs-12 col-md-7">
<div class="row addresses">
<h2 class="bg-country">Belgium</h2>
<div class="col-xs-6 col-md-6">
<div class="information">
<div class="address">
Itech Incubator 2<br>
rue Auguste Piccard 48<br>
B - 6041 Charleroi
</div>
<div class="numbers">
<span>T</span> +32 71 15 91 30<br>
<span>E</span> <a href="mailto:valerie.t@vkgroup.be">valerie.t@vkgroup.be</a>
</div>
<div class="direction text-center">
<a href="#" class="btn btn-xs btn-success">Directions</a>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="information">
<div class="address">
Brugsesteenweg 210<br>
B - 8800 Roeselare
</div>
<div class="numbers">
<span>T</span> +32 51 26 20 20<br>
<span>F</span> +32 51 26 20 21<br>
<span>E</span> <a href="mailto:roeselare@vkgroup.be">roeselare@vkgroup.be</a>
</div>
<div class="direction text-center">
<a href="#" class="btn btn-xs btn-success">Directions</a>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="information">
<div class="address">
Europa Building<br>
Avenue Clemenceau 87<br>
B - 1070 Brussels
</div>
<div class="numbers">
<span>T</span> +32 2 414 07 77<br>
<span>F</span> +32 2 414 04 98<br>
<span>E</span> <a href="mailto:bxl@vkgroup.be">bxl@vkgroup.be</a>
</div>
<div class="direction text-center">
<a href="#" class="btn btn-xs btn-success">Directions</a>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="information">
<div class="address">
Axxes Business Park<br>
Guldensporenpark<br>
Building A - n° 4<br>
B - 9820 Merelbeke
</div>
<div class="numbers">
<span>T</span> +32 9 210 31 50<br>
<span>F</span> +32 9 210 31 59<br>
<span>E</span>
<a href="mailto:gent@vkgroup.be">gent@vkgroup.be</a>
</div>
<div class="direction text-center">
<a href="#" class="btn btn-xs btn-success">Directions</a>
</div>
</div>
</div>
</div>
</div> <!--end row Belgium-->
<div class="row col-xs-12 col-md-12">
<div class=" row addresses">
<h2 class="bg-country">Vietnam</h2>
<div class="col-xs-6 col-md-3">
<div class="information">
<div class="address">
Pullman Hanoi, C21, Level 5<br>
40 Cat Linh, Dong Da District<br>
Hanoi
</div>
<div class="numbers">
<span>T</span> +84 4 3736 9097<br>
<span>E</span> <a href="mailto:vietnam@vkgroup.be">vietnam@vkgroup.be</a>
</div>
<div class="direction text-center">
<a href="#" class="btn btn-xs btn-success">Directions</a>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="information">
<div class="address">
Harbour View Tower, Level 13<br>
35 Nguyen Hue, District 1<br>
Ho Chi Minh City
</div>
<div class="numbers">
<span>T</span> +84 8 3512 2051<br>
<span>E</span>
<a href="mailto:vietnam@vkgroup.be">vietnam@vkgroup.be</a>
</div>
<div class="direction text-center">
<a href="#" class="btn btn-xs btn-success">Directions</a>
</div>
</div>
</div>
</div>
</div> <!--end row Vietnam -->
</div> <!--end container-->
<div class="container col-lg-12 space"></div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？