Question

我在完成'正确'时遇到了一些麻烦...

这是一个两个人。：）

1。）让布局看起来像我需要它（不使用表格！），但由于某种原因我可以让div和嵌套div“行动正确”...（肯定是我的错误/误理解）

我试图获得这样的布局，只使用DIVS和display..etc ..

我自己尝试过（所以你不认为我只是在寻找一份讲义）:) .. 但有些事情，比如自定义div容器的垂直对齐是不工作的..等等。

这是我的JSFiddle尝试：http://jsfiddle.net/yeKxU/1/

JSFiddle Code：

<div class="container">
    <div class="logo"><img src="http://academickids.com/encyclopedia/images/thumb/5/53/150px-Blue_morpho_butterfly_300x271.jpg" /></div>
    <div class="custom">
        <div class="president">item1</div>
        <div class="mission">item2</div>
        <div class="active">item3</div>        
    </div>
    <div class="url">www.nike.com</div>
    <div class="freetext">random text</div>
</div>

CSS：

* {
border: 1px dashed blue;
padding:0;
margin:0;
}

div{
    display: inline-block;
    border:2px solid;
    border-radius:2px;
    border-color:#FF0000;    
}

.container{
    width:450px;
    padding:0;
    margin:0;
}

.logo{
    padding:0;
    margin:0;
}

.custom{
    vertical-align:top; /* doesnt work to move the 'custom div' to the top */
/* width:63%;*/  /*needs to auto stretch to fit the rest of the space after image*/
}

.custom div{    
    display:block;
    background-color:#EEEEEE;
}

.url{
    width:100%;
}

.freetext{    
    width:100%;
}

情侣注意：图像div右边的'3'字段中会有不同的数据..（意思是我不清楚他们是否需要包裹或不...有希望不是问题）< / p>

问题的第二部分是关于实现一些动态功能。（jQuery我想应该可以工作）..

2。）了解我正在尝试实现的一般（完美场景）布局...... 我还需要以某种方式对事物进行编码..即数据的某些部分是MISSING，然后'cell'（div）被删除/隐藏（或者某种东西）

*（我正在使用PHP打印到屏幕，吐出HTML / DIVS..etc并使用变量来填充DIV /图像的内容等等）

所以例如......

如果IMAGE不存在（变量为空）.Id喜欢CUSTOM div，其中每个文本字段有3个子div），以便将所有方式扩展到LEFT ..因为徽标/图像DIV没有任何东西（或者因为它是空的而被删除/隐藏）
同样适用于CUSTOM DIV容器中的文本字段..如果其中一个字段是BLANK ...它不应该只有一个空/空占位符......它应该被删除/隐藏..其余的数据与TOP（在可能出现的任何其他领域之下）相对应

我已经看过你在舞台上有一些DIV块的例子（sorta）..点击一个......它将它移除..另一个DIVS移动......等等......（同样的事情，除了我不能手动点击要移除它们的东西）..

所以也许有些jQuery要通过'DIVS'看看它是否为空，然后自行删除？

-OR -

只是具有流体/液体工作的某种布局？会更好？所以我真的不需要检查它是否为空......如果没有在单元格/ DIV中......那么另一个只是调整它们的宽度/位置来弥补它？

让我知道你们的想法？赞赏JSFiddle的例子！

谢谢！

Answer 1

你可以在你的div上设置很多属性，一个是max-width ...如果你的总宽度比你的容器宽得多，那么你在div上宽度设置任何值的一个风险是将在divA下叠加......我认为你不希望发生这种情况...... :)你可以在你的div上用min-width和max-width做一些实验以获得你想要的行为因为我猜你有一些在你的照片上玩的价值......

divA {
    float:left;
    max-width:50px;
}

divB {
    float:left;
    min-width:400px;
}

例如，你必须找到你的价值观，试验和错误方式，我猜...

如果你搜索css和定位，那么互联网上还有很多指南......快乐的狩猎！

Answer 2

你可以在你的div上设置很多属性，一个是max-width ...如果你的总宽度比你的容器宽得多，那么你在div上宽度设置任何值的一个风险是将在divA下叠加......我认为你不希望发生这种情况...... :)你可以在你的div上用min-width和max-width做一些实验以获得你想要的行为因为我猜你有一些在你的照片上玩的价值......

divA {
    float:left;
    max-width:50px;
}

divB {
    float:left;
    min-width:400px;
}

例如，你必须找到你的价值观，试验和错误方式，我猜...

如果你搜索css和定位，那么互联网上还有很多指南......快乐的狩猎！

CSS位置（tabbless）和删除（隐藏）空DIVS

2 个答案: