Jquery 使用墙贴设计类似facebook的墙的样式_Jquery_Html_Css

Jquery 使用墙贴设计类似facebook的墙的样式

jquery html css

Jquery 使用墙贴设计类似facebook的墙的样式,jquery,html,css,Jquery,Html,Css,对于我目前正在开发的系统，它需要为每个用户提供与facebook的网页非常相似的外观。以下是每个帖子的外观：复选框、头像+名称、WC id、类别（用户定义）、帖子的实际文本以及带有同意、评论等的“链接栏”（每种类型的帖子不同）然而，对于我已经玩了很长一段时间的样式/布局，我无法让它看起来“正确”。下面是它落地时的样子（外边框仅用于说明。由于某种原因，无序列表和post按钮会重叠。Chrome上的屏幕截图）以下是CSS： .listOfPosts{ list-style-type

对于我目前正在开发的系统，它需要为每个用户提供与facebook的网页非常相似的外观。以下是每个帖子的外观：

复选框、头像+名称、WC id、类别（用户定义）、帖子的实际文本以及带有同意、评论等的“链接栏”（每种类型的帖子不同）

然而，对于我已经玩了很长一段时间的样式/布局，我无法让它看起来“正确”。下面是它落地时的样子（外边框仅用于说明。由于某种原因，无序列表和post按钮会重叠。Chrome上的屏幕截图）

以下是CSS：

.listOfPosts{
    list-style-type:none;
    margin:0px;
    padding:0px;
    border-style:solid;
    border-width:1px;
}

.post {
    display:block;
    margin-right:35px;
    margin-top:10px;
    margin-bottom:10px;
    padding:3px;
}

.avatarColumn {
    text-align:center;
    float:left;
    margin-right:2px;
}

.avatarColumn a:link, .avatarColumn .authorName a:link {
    padding:2px;
    text-align:center;
    text-decoration:none;
}

.postDetails, .categorizationDetails, .actionsNavBar {
    list-style-type:none;   
}

.postDetails li {
    display:block;
}

.categorizationDetails li, .actionsNavBar li{
    display:inline;
    float:left;
}

.actionsNavBar li a {
    padding:2px;
}

.wcid {
    font-weight:bold;
    color:black;
}

.category {
    background-color:red;
    color:white;
    font-weight:bold;
    margin-left:1px;
    margin-right:1px;
}

这是我正在尝试设计的HTML。它不需要以这种方式表示，但我考虑过以这种方式表示它。如果结构不同，则建议更受欢迎：）（div'main'的宽度为560px，是3列布局中的中心列）

此问题可能是由于未清除浮动元素造成的

添加新的css样式：

.clear {
    clear:both;
}

然后添加一个新的div，类“clear”作为文章中的最后一项。这将有望解决您的问题：

<li class="post">
    <div class="avatarColumn">
        ....
    </div>
    <div class="postDetailsContainer">
        ....
    </div>
    <div class="clear"></div>
</li>


....
....

这是我在Aptana:）上稍微调整和浸泡dreamweaver后得到的最终输出（仅用于缩进/格式化代码的简单/快速快捷方式，以提高可读性）

ul.listOfPosts前面有一个div.clear，如@MyHeadHurts所示。只是在ul和clear上加了一个余量：两者似乎都不起作用。我也为li.categorization类做了这项工作，并在以后再次调整布局时将其删除

以下是目前看来有效的最后一个CSS：

.listOfPosts {
        list-style-type:none;
        margin-top:10px;
        margin-left:0px;
        margin-right:0px;
        margin-bottom:0px;
        padding:0px;
    }
    .post {
        display:block;
        margin-top:10px;
        margin-bottom:10px;
        padding-bottom:10px;
        padding-top:10px;
        border-top-style:solid;
        border-top-color:#999;
        border-top-width:1px;
    }
    .postContainer {
        width:540px;
        margin-left:auto;
        margin-right:auto;
    }
    .avatarColumn {
        text-align:center;
        float:left;
        margin-right:2px;
        width:80px;
    }
    .avatarColumn .authorName {
        margin-top:10px;
        width:inherit;
        text-align:center;
    }
    .avatarColumn a:link, .avatarColumn .authorName a:link {
        padding:2px;
        text-align:center;
        text-decoration:none;
    }
    .avatarColumn a:link {
        width: inherit;
        height:50px;
        padding:1px;
    }
    .avatarColumn img {
        width:70px;
        height:50px;
        margin-left:auto;
        margin-right:auto;
        border:none;
    }
    .postDetailsContainer {
        float:left;
        width:450px;
    }
    .postDetails, .postDetails .categorizationDetails, .postDetails .actionsNavBar {
        list-style-type:none;
        margin:0px;
        padding:0px;
    }
    .postDetails li {
        display:block;
    }
    .postDetails .categorizationDetails li, .postDetails .actionsNavBar li {
        display:inline;
        float:left;
    }
    .postDetails .actionsNavBar li a {
        margin-left:2px;
        margin-right:2px;
        padding:2px;
        text-decoration:none;
        text-align: center;
    }
    .postDetails .actionsNavBar li a:hover {
        text-decoration:underline;
    }
    .postDetails .wcid {
        font-weight:bold;
        color:black;
        margin-right:3px;
    }
    .categorizationDetails .category {
        background-color:red;
        color:white;
        font-weight:bold;
        margin-left:2px;
        margin-right:2px;
    }
    .postDetails .postData {
        margin-top:4px;
        margin-bottom:10px;
    }
    .clear {
        clear:both;
    }
    span.dotSeparator {
        display:inline;
        position:relative;
        top:-30%;
        left:-1px;
    }

唯一额外的是postContainer，它只是整个“post”的包装器，以便能够居中，并在底部为“links”添加了一个“dotselector”

老实说，我真的不知道是什么“解决”了这个问题。我确实重新组织了CSS代码，以提高“继承”样式的可读性，并添加了一个clear类和一个postContainer div。有人能发现主要区别吗？：）

嗨，努普，你重置你的CSS了吗？默认情况下，大多数浏览器对元素应用边距、填充和其他CSS属性。如果您希望在浏览器中实现像素完美，则必须解决此问题。：）@乔纳斯：我甚至不知道该怎么做：）如果我不小心重置了它，我该如何“取消重置”它（因为没有更好的词）？^^^我肯定这是稍微不复杂的事情。清除浮动不能解决此问题吗？如果没有，请告诉我，我们可以尝试其他方法。您可以在此处阅读有关css重置的内容：。jist是取消重置比不重置更容易。：）这部分解决了ul与post按钮重叠的问题！非常感谢！但只是做了一个明确的说明：ul上的这两项似乎都不起作用（没有div）。有什么想法吗？为了跟进，我还尝试了在li.categorization之后使用clear div的想法，它似乎工作得很好。我后来删除了它，并尝试了一些技巧，它似乎工作！我已经把它作为一个答案贴了出来，但是这本书中仍然缺少一些东西look@Nupul-我不知道为什么ul上的clear不起作用。你是内联的还是作为一个类的一部分？清除的目的是删除一个浮动（左、右或两者），这会导致清除的元素位于前一个浮动元素的下方。您是否尝试在页面上放置多篇文章？我现在已经试过了，你得到了一个级联效应。您通常需要清除所有已应用的浮动-因此要解决此问题，您需要在您的#post id中添加clear:两者。@MyHeadHurts:yes！面对这个问题。做了一个明确的说明：每个帖子的上边框和上边框似乎都排得很好。但是没有任何小于100px的边距/填充显示在帖子之间的间距上！！！很奇怪。我承认我不擅长基于div的布局和相应的css，但是理解这种行为有点棘手。W3学校只帮了这么多…：）@我的头痛：哈哈！我想我在写下我的评论后理解了你的评论：“你必须清除你申请的所有浮动……”我在前面做了一个清除，就像你建议的那样，而且似乎有效！好吧，为了清楚地理解这一点：第n级嵌套div是否是浮点并不重要，但在“根级别”之外操作时仍然必须清除它（也就是说，对于该组件/层，例如：.post=root和.avatarColumn=nested in root）。为什么不能在.post本身添加一个明确的：tware-to.post？我试过了，但似乎不起作用？为什么需要一个特殊的“clear div”？您将能够在#post div中使用clear:这应该可以清除float-当我用您的代码尝试它时，它起了作用。思考clear的最佳方式是决定——我是否希望下一个项目在这个项目之后浮动。如果没有，则在下一个项目上应用clear或使用clear div。永远不要使浮点未清除，否则您将在以后遇到麻烦。另外，我不确定您是否知道，但是您可以在一个div中应用多个类，例如，您可以执行以下操作。这与向css类添加clear的工作原理相同。

<li class="post">
    <div class="avatarColumn">
        ....
    </div>
    <div class="postDetailsContainer">
        ....
    </div>
    <div class="clear"></div>
</li>

.listOfPosts {
        list-style-type:none;
        margin-top:10px;
        margin-left:0px;
        margin-right:0px;
        margin-bottom:0px;
        padding:0px;
    }
    .post {
        display:block;
        margin-top:10px;
        margin-bottom:10px;
        padding-bottom:10px;
        padding-top:10px;
        border-top-style:solid;
        border-top-color:#999;
        border-top-width:1px;
    }
    .postContainer {
        width:540px;
        margin-left:auto;
        margin-right:auto;
    }
    .avatarColumn {
        text-align:center;
        float:left;
        margin-right:2px;
        width:80px;
    }
    .avatarColumn .authorName {
        margin-top:10px;
        width:inherit;
        text-align:center;
    }
    .avatarColumn a:link, .avatarColumn .authorName a:link {
        padding:2px;
        text-align:center;
        text-decoration:none;
    }
    .avatarColumn a:link {
        width: inherit;
        height:50px;
        padding:1px;
    }
    .avatarColumn img {
        width:70px;
        height:50px;
        margin-left:auto;
        margin-right:auto;
        border:none;
    }
    .postDetailsContainer {
        float:left;
        width:450px;
    }
    .postDetails, .postDetails .categorizationDetails, .postDetails .actionsNavBar {
        list-style-type:none;
        margin:0px;
        padding:0px;
    }
    .postDetails li {
        display:block;
    }
    .postDetails .categorizationDetails li, .postDetails .actionsNavBar li {
        display:inline;
        float:left;
    }
    .postDetails .actionsNavBar li a {
        margin-left:2px;
        margin-right:2px;
        padding:2px;
        text-decoration:none;
        text-align: center;
    }
    .postDetails .actionsNavBar li a:hover {
        text-decoration:underline;
    }
    .postDetails .wcid {
        font-weight:bold;
        color:black;
        margin-right:3px;
    }
    .categorizationDetails .category {
        background-color:red;
        color:white;
        font-weight:bold;
        margin-left:2px;
        margin-right:2px;
    }
    .postDetails .postData {
        margin-top:4px;
        margin-bottom:10px;
    }
    .clear {
        clear:both;
    }
    span.dotSeparator {
        display:inline;
        position:relative;
        top:-30%;
        left:-1px;
    }