Question

我正在尝试创建一个简单的响应式html页面，我有一点问题。

我想要内联显示两个div。

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

这对我来说没问题。

但是当我添加一些比宽度更长的内容时，自动换行就会出现，并且第一个div的顶部会出现一些空格。

我会发布代码。

我想删除顶部的空格（div保持内联）

＆＃13;

$(document).ready(function() {
    $('#menu').click(function(e) {  
		if( $('#menu').text() == "SHOW INFO" )
			$('#menu').text('HIDE INFO');
		else
			$('#menu').text('SHOW INFO');
    });
});

＆＃13;

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;
	}
}

＆＃13;

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

＆＃13;

Answer 1

此样式将阻止第一个div的额外顶部间距：

.wrapper > div {
  vertical-align: top;
}

这是一篇比较inline-block到float个样式的好文章，它解决了添加vertical-align: top的需要：http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

<强>段

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

嘿为您的元素添加float属性：

.content, .info {
    float:left;
}

CSS空间出现

2 个答案: