CSS处理溢出的div

我有2个div的问题。CSS处理溢出的div

它是一个100％宽度有2个div的盒子。左边是缩略图。正确的是描述。

我的问题是，当您调整浏览器窗口的大小时，数据描述会在缩略图下方显示。我添加了最小宽度但没有结果。也许我把它加在错误的地方。

非常感谢。

http://jsfiddle.net/NzX9e/

来源

2012-07-19 JorgeeFG

您是否可以将您的示例简化为证明问题所需的最低限度标记？你有这么多元素，我不确定你遇到了哪些问题。 – KatieK 2012-07-19 20:36:04

对不起，这里是：http://jsfiddle.net/NzX9e/6/ – JorgeeFG 2012-07-19 20:38:29

如果希望事物在缩放窗口时正常工作，请勿将％值与固定宽度混合。一个div自然会获得父母给它的所有空间。所以你真正需要做的是去掉很多不必要的样式和标记。

对于这个特定的情况下：http://jsfiddle.net/NzX9e/7/

基本上，你浮在div包含IMG和删除它旁边的一个所有其他样式（我加了一些填充它，给它一点未来的喘息空间到图像）。

.docBox { 
    border: solid 1px #006633; 
    margin: 10px 0px 0px 10px; 
    overflow: hidden; <- this acts like a clear to keep the floated div in the parent 
} 

.previewImgBox { 
    height: 70px; 
    width: 50px; 
    text-align: center; 
    float: left; 
} 

.previewData { 
    padding: 0 0 0 60px; 
    'all the styles you had here are not needed and cause your problem' 
}

我是不是去通过，并清理所有的标记和样式，只是调用它的是，你有很多超过需要。可能比你想要完成的事情多一倍。少即是多。 :)

来源

2012-07-19 20:45:26 Waterboy

谢谢，为什么你更喜欢浮动图像而不是2个内联div？我在这方面是新手，这是我不明白的，必须有一个原因。在预览数据我有溢出：自动，因为我不想固定的高度，并把关键字的滚动条，如果有溢出。在你的小提琴它不工作，如果我添加它...是因为父母有溢出：隐藏？ – JorgeeFG 2012-07-19 20:51:34

不确定为什么你想要一个固定的高度，在每个文本块上出现滚动条会很烦人。如果你喜欢，你可以添加它。内联意味着元素大小的内容，你真正想要的是一个盒子布局（在我的经验中最常见）。你会发现用css和html你几乎可以随心所欲地获得东西，但正确的方式将始终导致最干净的解决方案和最少量的代码。我在这里写了一个回应，试图描述推理，但这个领域还不够大。简而言之，发挥元素自然行为的长处。 – Waterboy 2012-07-19 21:27:19

嗯，我只是95％的宽度修改为94％，它的工作就像一个魅力。我希望问题能够保持开放以查看是否有更好的解决方案。

来源

2012-07-19 20:36:16 JorgeeFG

的jsfiddle：http://jsfiddle.net/NzX9e/11/

变化包括：

取出的margin-top：

.previewImgBox .thumb { 
    /*margin-top: 5px;*/ 
}

添加高度：

.docBox { 
    height: 70px; 
    border: solid 1px #006633; 
    margin: 10px 0px 0px 10px; 
}

添加浮动：左：

.previewData { 
    height: 70px; 
    min-width: 95%; 
    width: 95%; 
    /*border: solid 1px #00CC33;*/ 
    overflow: auto; 
    display: inline-block; 
    float:left; 
} 

.previewImgBox { 
    height: 70px; 
    width: 50px; 
    /*border: solid 1px #00CC33;*/ 
    text-align: center; 
    display: inline-block; 
    float:left; 
}

来源

2012-07-19 20:37:11

嗯，它比我的第一个例子更破碎：P它正在外面的容器分区。 – JorgeeFG 2012-07-19 20:41:39

傻，即。再试一次。 – 2012-07-19 20:47:28

谢谢，这是工作。我会问你同样的问题，我做了另一个答复：为什么你喜欢浮动图像，而不是2个内联div？好奇心比其他东西更多。 – JorgeeFG 2012-07-19 20:55:31

CSS处理溢出的div

回答

相关问题