通常情况下,当我们想要DIVs连续使用多个时float: left,我现在会发现它的诀窍display:inline-block
示例链接在这里.在我看来,这display:inline-block是一个更好align DIVs的连续方式,但有任何缺点吗？为什么这种方法不那么流行float呢？
这是我的情况.我已经创建了几个并排堆叠的面板,这些面板包裹在一个主容器中.每个面板占据视口宽度和高度的100%.我的目标是当我点击各自的链接时能够水平滚动到每个面板.使用纯css方法可以正常工作.但是,我正在学习jQuery,我希望使用.scrollTo()方法来实现这一点.
当面板一个堆叠在一起(即垂直)时,我能够获得每个面板的顶部偏移并很好地滚动到它们的位置.
随着水平变化,我很难获得面板的左偏移.我得到所有这些的左偏移量为零.如果我的逻辑是正确的,那么说视口宽度为1920px,第二个面板的左偏移应该是1920px,第三个是3840px等.
根据我迄今收集到的信息,这是因为面板位于视口之外.事实上,我已经为面板应用了20%的宽度,以便它们在视口中都可见,然后我尝试提醒他们的左偏移.他们成功地被提示给了我.
那么我该如何解决这个问题呢？看起来我正在重新发明轮子,但就像我说的那样,我正在学习jQuery所以我需要理解它为什么会这样表现以及如何解决这个问题.任何帮助将受到高度赞赏:)以下是我到目前为止的片段.
谢谢.
标记:
<div class="mainWrapper">
<section class="panel" id="panel-1"></section>
<section class="panel" id="panel-2"></section>
<section class="panel" id="panel-3"></section>
<section class="panel" id="panel-4"></section>
</div>
CSS:
.mainWrapper, .panel {
position: relative;
height: 100%;
}
.mainWrapper {
top: 0;
left: 0;
}
.panel {
display: inline-block;
background: rgba(255, 255, 255, 1);
}
Javascript:
$(document).ready(function() {
var $panelWrapper = $('.mainWrapper');
var $panels = $('.mainWrapper').find('.panel');
var $panelScrollPos = new Array();
$panels.each(function(i) {
//This is where I need help. It's not working
$panelScrollPos[i] = Math.round($(this).offset().left - $panelWrapper.offset().left); …这是我的下拉菜单代码.我从一个产生这个的教程中提取代码:http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html
但是我没有文本导航,而是可以在附加到span id的CSS中看到图像.使用此代码,我正确地给出了每个跨度的下拉菜单,我无法摆脱它们之间的空白区域.
我知道div/spans之间的HTML新行创建了空格,但我想知道在CSS中摆脱它们的方法.
<div id="menu">
<ul class="tabs">
<li class="hasmore"><a href="#"><span id="bird"></span></a>
<ul class="dropdown">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li class="last"><a href="#">Menu item 6</a></li>
</ul></li><li class="hasmore"><a href="#"><span id="wild"></span></a>
<ul class="dropdown">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li class="last"><a href="#">Menu item 6</a></li>
</ul>
</li>
</ul>
</div>
这是一些适用的CSS:
#menu ul
{
margin: 0 auto;
}
ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
ul.tabs li
{
margin: 0;
padding: …编辑:此处的Plunker预览 - http://embed.plnkr.co/2afyRrde2rxncxPelB69/preview
可能是一个可怕的头衔,但一分钟后我无法想出更好的.
我创建了一个带有angularjs和一些html的简单页面.我遇到的问题实际上是css.当你点击一个菜单项时,它突出显示该块,但是我得到一个奇怪的1-2 px边框,它没有在底部突出显示.
已经好几个小时了,并且认真地走上墙...
我的HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link type="text/css" rel="stylesheet" href="css.css" />
<!--AngularJS code-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Adding the ng-app declaration to initialize AngularJS -->
<div id="main" ng-app>
<!-- The navigation menu will get the value of the "active" variable as a class.
The $event.preventDefault() stops the page from jumping when a link is clicked. -->
<div id="header">
<div id="title"> …我想使用div在同一行显示两个图表.你能帮忙吗？
这是我正在尝试但它显示在2行.
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div>
<div id="container" style="width: 200px; height: 200px; diplay:inline"></div>
<div id="container2" style="width: 200px; height: 200px; display:inline"></div>
</div>
css ×5
html ×5
javascript ×3
angularjs ×1
css-float ×1
css3 ×1
highcharts ×1
jquery ×1
viewport ×1
whitespace ×1