Question

我正在使用bootstrap，我想把它放到左边有一半页面缩略图的位置，另一半会在点击这些缩略图时显示结果。但是，我似乎无法弄清楚如何使容器只在页面的左侧（基本上是页面的50％）。有什么建议吗？

Answer 1

我觉得这就是您正在寻找的内容：http://jsfiddle.net/ctwheels/PrSUL/

HTML 的

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

</script>
<div id="left">
    <div class="padding">
        <ul>
            <li class="menuItem" id="one">One</li>
            <li class="menuItem" id="two">Two</li>
        </ul>
    </div>
</div>
<div id="right">
    <div class="padding">
        <div id="oneItem" class="rightPanel">This is one</div>
        <div id="twoItem" class="rightPanel">This is two</div>
    </div>
</div>

CSS

#left {
    position:absolute;
    left:0px;
    top:0px;
    bottom:0px;
    width:50%;
    background-color:#dddddd;
}
#right {
    position:absolute;
    right:0px;
    top:0px;
    bottom:0px;
    width:50%;
    background-color:#444444;
    color:white;
}
/*Reason for adding div just for padding is because if you add padding
to the div getting 50% width, the padding is added to the width, thus 
your width would be 50% + padding instead of 50%*/
 .padding {
    margin:10px;
}
ul {
    margin-top:0px;
    list-style-type:none;
}
li {
    margin-left:-40px;
    border:2px solid #ffffff;
    padding:7px;
    display:block;
}
li:hover {
    background-color:#444444;
    color:white;
}
.rightPanel {
    display:none;
}

JS

$(".menuItem").mouseover(function(){
    var myId = this.id;
    $("#"+myId+"Item").show();
});
$(".menuItem").mouseout(function(){
    var myId = this.id;
    $("#"+myId+"Item").hide();
});

如何将容器更改为只占用一半页面？

1 个答案: