Question

我在网站上安排nav / div时遇到了一点问题。谷歌没有向我透露解决方案，但说实话，我真的不知道如何搜索它......

最后我想拥有的内容： 在左侧，可以看到<nav>（数据选择）。在右侧，几个<div>（图表）显示为一个有2列和无限行的表格。最大。两张图并排。 <nav>的字段应独立，这意味着右侧的<div>不应<{1}} 。

我如何实现css文件？

如果单击此超链接，您将看到该安排的当前情况： Screenshot of the nav and the divs

稍后：目标是实现此处所述的拖放行为：HTML5 Drag&Drop。应该可以从<nav>拖动数据并将其放入任何图形 - <nav>以进行可视化。

谢谢！

Answer 1

在CSS中尝试：

display: inline-block;

Answer 2

根据我从阅读你的问题的理解，你想在左边有一个导航栏，右边有另一个带有图像/图形的容器？

这是一个js小提琴，我把快速展示花车放在一起：http://jsfiddle.net/HzS3m/1/

HTML:
<body>
    <nav id="nav">
        <a href="#">HTML</a>
        <a href="#">CSS</a> 
        <a href="#">JavaScript</a>
        <a href="#">jQuery</a>
    </nav>
    <div id="graphs">
        <img src="#">
        <img src="#">
        <img src="#">        
    </div>
</body>

CSS:
nav{
    width:20%;
    height:200px;
    background-color:#f00;
    float:left;
}

#graphs{
    width:80%;
    overflow:auto;
    background-color:#ff0;
    float:right;
    text-align:center;
}

img{
    width:300px;
    height:90px;
    border:1px solid #000;
}

浮点数是一种将html / div元素并排排列的好方法。

希望这对你有所帮助。

Answer 3

CSS

nav {
    width:30%;       //<----Occupying 30% of total width, change it as required
    float:left;
}
#charts-wrapper {
    float:left;
    width:68%;       //<----Occupying 68% of total width and occurs on right of nav, change it as required
    margin-left:1%;
    margin-top:10px;
}
.charts {
    float: left;
    width:32%;       //<-----Equal area within charts
    margin-left:0.5%;
}

用css安排div

3 个答案:

Demo Fiddle