Question

我有<div>调用容器，它包含了几个名为block的<div> s，我使用了一个名为columnizer的jquery插件将块拆分成列。问题是，我不能似乎让<div>被称为容器包裹着越过div的块。我也得到了图片来证明我的问题。

我尝试了很多解决方案，比如移除容器宽度，但它不起作用，因为我认为jquery plugyin称为columnizier需要宽度。

enter image description here

我的HTML

<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/adamwulf/Columnizer-jQuery-Plugin/master/src/jquery.columnizer.js"></script>

    <script type="text/javascript">
    $(function(){
        $('h1').addClass('dontend');
        $('.wide').columnize({
            width : 100,
            height : 300
        });
    });
</script>

 <script  style="display:none" type="text/javascript">var Mint=new Object();Mint.save=function()
{var now=new Date();var debug=false;if(window.location.hash=='#Mint:Debug'){debug=true;};var path='http://welcome.totheinter.net/mint/?record&key=6a56784248357a3735323031363633316663796c526d';path=path.replace(/^https?:/,window.location.protocol);for(var developer in this)
{for(var plugin in this[developer])
{if(this[developer][plugin]&&this[developer][plugin].onsave)
{path+=this[developer][plugin].onsave();};};};path+='&'+now.getTime();if(debug){window.open(path+'&debug&errors','MintLiveDebug'+now.getTime());return;};var ie=/*@cc_on!@*/0;if(!ie&&document.getElementsByTagName&&(document.createElementNS||document.createElement))
{var tag=(document.createElementNS)?document.createElementNS('http://www.w3.org/1999/xhtml','script'):document.createElement('script');tag.type='text/javascript';tag.src=path+'&serve_js';document.getElementsByTagName('head')[0].appendChild(tag);}
else if(document.write)
{document.write('<'+'script type="text/javascript" src="'+path+'&amp;serve_js"><'+'/script>');};};if(!Mint.SI){Mint.SI=new Object();}
Mint.SI.Referrer={onsave:function()
{var encoded=0;if(typeof Mint_SI_DocumentTitle=='undefined'){Mint_SI_DocumentTitle=document.title;}
else{encoded=1;};var referer=(window.decodeURI)?window.decodeURI(document.referrer):document.referrer;var resource=(window.decodeURI)?window.decodeURI(document.URL):document.URL;return '&referer='+escape(referer)+'&resource='+escape(resource)+'&resource_title='+escape(Mint_SI_DocumentTitle)+'&resource_title_encoded='+encoded;}};Mint.save();</script> 


<!DOCTYPE html>




<meta charset="utf-8" />
<link rel="stylesheet" href="b.css">



<div class="container"> <div class="wide">


    <div class="block"></div><br>
    <div class="block"></div><br>
    <div class="block"></div><br>


</div></div>

我的css

.container {
    background-color: #ED8713;
    height: 300px;
    width: 200px;

}
.block {
    width: 50px;
    height:250px;
    background-color: #C31212;
    margin: 10px;
    margin-top: 5px;
}

Answer 1

这里有效：http://jsfiddle.net/gRxdF/3/

CSS：

.container {
    background-color: #ED8713;
    height: 300px;
    float: left;
}
.block {
    display: inline-block;
    height: 250px;
    background-color: #C31212;
    margin: 10px;
    margin-top: 5px;
}

HTML - 我删除了<br>代码。

CSS <div>包装错误</div>

1 个答案: