Question

我有一排div在一个花药附近漂浮，而且这个盒子有一个最大宽度，所以每行最多只有4个div

当我重新调整窗口大小时，行会收缩，所以最后每行都有一个div（就像我想要的那样）

我的问题是，无论窗口大小或点击时行中有多少div，我如何在每行下方添加另一行？

当行的大小固定时，我设法这样做，但当它们是动态的时候却没有这样做

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="<?php echo plugins_url( "design.css", __FILE__ ) ;?>""" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    var oldRow = 0;
    var oldID = 0;
    var rowCount = 2;
    function openRow(row,id) {



        var elm = document.getElementById("rowInfo" + row);
        var txt = document.getElementById("text" + row);
        var logo = document.getElementById("logo" + id);

        if (oldID == id && elm.style.display == "block")
        {
            elm.style.display = "none";
            logo.style.backgroundColor = "green";
        }
        else {
            elm.style.display = "block";
            txt.innerHTML = "ID = " + id;
            oldID = id;

            if (oldRow!=0 && oldRow != row) {
                document.getElementById("rowInfo" + oldRow).style.display = "none";
            }

            if (oldID != 0) {
                document.getElementById("logo" + oldID).style.backgroundColor = 'green';
            }

            oldRow = row;
        }

    }
</script>
</head>
<body>
<div id="Main">
    <div class="row">
        <div class="rowBox">
            <div class="rowBoxLogo" id="logo1">
                <img src="<?php echo plugins_url( "logos/logo.png",__FILE__ ) ;?>"onclick="openRow(1,1)" />
            </div>

        </div>
        <div class="rowBox" >
            <div class="rowBoxLogo" id="logo2">
                <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(1,2)" />
            </div>
        </div>  
        <div class="rowBox" >
            <div class="rowBoxLogo" id="logo3">
                <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(1,3)" />
            </div>
        </div> 
        <div class="rowBox" >
            <div class="rowBoxLogo" id="logo4">
                <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(1,4)" />
            </div>
        </div>
    </div>
    <div class="rowInfo" id="rowInfo1">
        <p class="par" id="text1"></p>
    </div>
   <div class="row">
       <div class="rowBox">
           <div class="rowBoxLogo" id="logo5">
               <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(2,5)" />
           </div>

       </div>
       <div class="rowBox">
           <div class="rowBoxLogo" id="logo6">
               <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(2,6)" />
           </div>
       </div>
       <div class="rowBox">
           <div class="rowBoxLogo" id="logo7">
               <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(2,7)" />
           </div>
       </div>
       <div class="rowBox">
           <div class="rowBoxLogo" id="logo8">
               <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(2,8)" />
           </div>
       </div>
   </div>
   <div class="rowInfo" id="rowInfo2">
       <p class ="par" id="text2"></p>
   </div>
</div>

</body>
</html>

和我的css

html {}
#Main {
    max-width:820px;
    margin:0 auto;
}
.row {
    width:100%;
    height:80px;
}
.rowBox {
    width:200px;
    height:100%;
    padding-left:5px;
    padding-bottom:5px;
    float: right;
}
.rowBoxLogo {
    width:100%;
    height:100%;
    float: right;
    background-color:green;
    vertical-align:middle;
    text-align:center
}
.rowInfo {
    width:100%;
    height:90px;
    background-color:green;
    display:none;
    padding:0 0 0 0;
}
.par {
    margin-top:0;
    padding:0;
}

Answer 1

对于这个问题，我会稍微改变一下风格。即，将块布局从float: right更改为display: inline-block。然后用这个简单的javascript很容易达到预期的效果：

var $info = $('<div class="rowInfo"><p class="par"></p></div>');
$('.rowBoxLogo').click(function() {
    var $block = $(this).parent('.rowBox');
    if ($block.next().hasClass('.rowInfo')) {
        $info.toggle();
    }
    else {
        $info.insertAfter($block).css('display', 'block');
        $info.find('.par').text("ID = " + this.id);
    }
});

在这种情况下，您不再需要在每个块上添加onclick属性。

演示： http://plnkr.co/edit/mbV9toL5CsZ2BwlVEFYH?p=preview

另外，您可能有兴趣查看我在类似问题How to target div at the end of the row?上提供的相关答案。

在onclick之后如何在动态divs行下面插入一个div

1 个答案: