CSS空间出现

我正在尝试制作一个简单的响应式 html 页面，但我遇到了一个小问题。

我有两个要内嵌显示的 div。

当宽度低于X时，我会隐藏第二个div。

这对我来说没问题。

但是当我添加一些比宽度长的内容时，自动换行开始起作用，第一个 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>

关于CSS空间出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29435462/

上一篇：Css 选择具有更改 href 值的图像？

下一篇：html - Bootstrap Navbar 下拉菜单不起作用