Question

我有这个HTML：

<div class="dashboard_wrap">

<div>orders</div>

<div>porting</div>

<div>contact</div>

</div>

显示3个div，这里是CSS：

.dashboard_wrap {
    padding:10px;
}
.dashboard_wrap div {
    border-left:1px solid black;
    padding:10px;
    width: 50%;
    height:200px;
    margin-bottom:50px;
    overflow-y:scroll;
    float: left;
}
.dashboard_clear:after {
   content: "";
   display: table;
   clear: both;
}
@media all and (max-width: 700px) {
    div.wrap div {
        width: 100%;
        float: none;
    }
}

我正在使用PHP，因此只有某些用户才能看到某些div。如果用户只能看到前两个div，我怎样才能使它们各占50％而不是40％？

Answer 1

没有必要使用php或javascript。你可以使用基本的html和css。您可以检查html小提琴：http://jsfiddle.net/4WaX4/1/

您需要的所有CSS都是：

.dashboard_wrap {
    display:table;
    min-width:500px;
    background:#00ff00;
}
.dashboard_items {
    display:table-row;
}
.dashboard_items div{
    display:table-cell;
    border:1px solid #ff0000;
}
@media all and (max-width: 700px) {
    div.dashboard_items div {
        width: 100%;
        display:block;
    }
}

html看起来如下：

<div class="dashboard_wrap">
    <div class="dashboard_items">
        <div>orders</div>

        <div>porting</div>        
    </div>
</div>

<div class="dashboard_wrap">
    <div class="dashboard_items">

        <div>orders</div>

        <div>porting</div>

        <div>contact</div>       
    </div>
</div>

非常简单快速。当您在jsfiddle中调整结果窗口的大小时，您会看到div相对于外部div（500px）变为100％。

我希望这是你正在寻找的解决方案......

Answer 2

您可以根据内部项目数指定包装器的类。每个变体的CSS类将自动处理样式。

但是，如果div的数量可以超出预期数量，那么动态内联样式可能是您的解决方案。

<div class="dashboard_wrap has3">

    <div>orders</div>

    <div>porting</div>

    <div>contact</div>

</div>

<div class="dashboard_wrap has2">

    <div>orders</div>

    <div>porting</div>

</div>

<style>
.dashboard_wrap div {
    border-left:1px solid black;
    padding:10px;
    height:200px;
    margin-bottom:50px;
    overflow-y:scroll;
    float: left;
}

.dashboard_wrap.has2 div {
    width: 50%;
}

.dashboard_wrap.has3 div {
    width: 33%;
}
</style>

Answer 3

当页面被渲染时，只有两个div可见。你需要做的是使用基于客户端的语言，即javascript或jQuery，来操纵屏幕上可见的内容。

使用简单的检查来查看哪些div可见或使用php生成一个值，您可以在页面中隐藏该值以便更容易调整div的大小，如：

<input type='hidden' id='divs_visible' value='" . $divs_visible ."' />

然后使用jQuery：

$(document).ready(function() {

   var divsvis = $("#divs_visible").val();

   if(divsvis == 2)
   {
      // resize the divs
   }

});

修改

你也可以渲染所有的div，然后使用jQuery和你在隐藏输入中放置的值，你可以简单地隐藏你不需要的div：

$("#div_to_be_hidden").hide();

屏幕变为700px后，CSS显示divs低于对方

3 个答案: