我正在尝试制作一个简单的响应html页面，但遇到了一个小问题。
我有两个div，我想内联显示。
当宽度小于X时，我将隐藏第二个分区。
这对我来说还可以。
但是，当我添加一些比宽度长的内容时，单词换行就会起作用，并且在第一个div的顶部会出现一些空白。
我会张贴代码。
我想删除顶部的空白（div保持内联）
$(document).ready(function() {
$('#menu').click(function(e) {
if( $('#menu').text() == "SHOW INFO" )
$('#menu').text('HIDE INFO');
else
$('#menu').text('SHOW INFO');
});
});html, body
{
margin: 0;
padding: 0;
height: 100%;
}
.wrapper
{
background-color:white;
width:100%;
height:100%;
}
.menu { display:none; }
.content
{
color:yellow;
background-color:black;
width:70%;
height:100%;
display: inline-block;
}
.info
{
background-color:white;
width:29%;
height:100%;
display: inline-block;
word-wrap:break-word;
}
@media only screen and (min-width: 100px) and (max-width: 700px)
{
.content
{
background-color:black;
width:100%;
height:100%;
}
.info { display:none; }
.menu
{
display:block;
height:40px;
line-height: 40px;
font-family: Verdana;
font-weight: normal;
font-size: 18px;
color: #D00355;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
.menu:hover
{
background-color:#D00355;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
line-height: 40px;
font-family: Verdana;
font-weight: normal;
font-size: 18px;
color: white;
position: relative;
text-align: center;
cursor:pointer;
}
}<html>
<head>
<title>Responsive Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="content">
1
</div>
<div class="info">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>
<div class="menu" id="menu" name="menu">SHOW INFO</div>
</div>
</body>
</html>此样式将防止第一个div的额外顶部间距：
.wrapper > div {
vertical-align: top;
}
以下是一篇比较inline-block和float样式的好文章，它解决了添加vertical-align: top的需要：http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
代码段
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
background-color: white;
width: 100%;
height: 100%;
}
.content {
color: yellow;
background-color: black;
width: 70%;
height: 100%;
display: inline-block;
}
.info {
background-color: white;
width: 29%;
height: 100%;
display: inline-block;
}
.infobox {
text-align: center;
}
.wrapper > div {
vertical-align: top;
}<div class="wrapper">
<div class="content">
1
</div>
<div class="info">
<div class="infobox">asdadasdadas
<br>asdadsa
<br>asdadsa
<br>asdadsa
</div>
</div>
<div class="menu" id="menu" name="menu">SHOW INFO</div>
</div>Hey为元素添加float属性：
.content, .info {
float:left;
}