为墙壁贴一个类似facebook的墙壁造型

时间：2011-04-06 05:19:53

标签： jquery html css

对于我目前正在处理的系统，它需要为每个用户的facebook页面提供非常相似的外观。这就是每个帖子应该的样子：

enter image description here

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

enter image description here

然而，由于我已经玩了很长一段时间的风格/布局，我一直无法让它看起来'正确'。以下是它看起来如何（外边框仅用于说明目的。由于某种原因，无序列表和帖子按钮发生重叠。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列布局中的中间列）

 <div id="main">
          <div id="postArea">
              <form action="/ezbay/wincondition" method="post" enctype="application/x-www-form-urlencoded" name="winconditionform">
                <textarea name="wincondition" id="wincondition"></textarea>
                <button id="postwincondition" type="submit">Post</button>
            </form>

          </div>


        <ul class="listOfPosts">

            <li class="post">
                <div class="avatarColumn">
                    <a href="#"><img src="defaultavatar.gif" width="86" height="51" /></a>
                    <div class="authorName"><a href="#">Nupul</a></div>
                </div>            
                <div class="postDetailsContainer">
                    <ul class="postDetails">

                        <li>
                            <ul class="categorizationDetails">                    
                                <li class="wcid">WC1</li>

                                <li class="category">FR</li>
                                <li class="category">Interface</li>
                            </ul>
                        </li>

                        <li>The posts should be similar in look and feel to that of facebook style wall posts, with the necessary indentation for Issues/options</li>

                        <li>
                            <ul class="actionsNavBar">
                                <li><a href="#" class="actionNavBarLink">Agree</a></li>
                                <li><a href="#" class="actionNavBarLink">Comment</a></li>
                                <li><a href="#" class="actionNavBarLink">Raise Issue/Concern/Risk</a></li>
                            </ul>
                        </li>

                </div>
            </li>

        </ul>
   </div>

关于如何让它“正确”的任何想法:)现在我没有添加复选框，也没有添加“自发布以来经过的时间”，但我想这应该不会很困难，一旦我得到正确的布局。基于JQuery的解决方案也很好：）

谢谢！

PS：这是textarea的代码和按钮，以防万一：

textarea#wincondition {
    min-width:496px;
    max-width:496px;
    min-height:100px;
    resize:none;
    border-width:1px;
    border-style:solid;
    border-color:#999;
    overflow:hidden;

}

button#postwincondition {
    float:right;
    margin-top:4px;
    font-weight:bold;
    border-width: 2px;
    border-style:solid;
    border-color: #3B5998;
    background-color: #3B5998;
    color:#FFF;
    width:70px;
}

2 个答案:

答案 0 :(得分：2)

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

添加新的CSS样式：

.clear {
    clear:both;
}

然后添加一个新的div，其中“clear”类作为帖子中的最后一项。这应该有希望解决您的问题：

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

答案 1 :(得分：0)

这是我在相当稍微调整并在Aptana上推送Dreamweaver后获得的最终输出:)（仅用于缩进/格式化代码以便于阅读的简单/快捷方式）

enter image description here

ul.listOfPosts之前是@MyHeadHurts建议的div.clear。只需在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'的包装潜水，以便实现居中并为底部的'链接'添加'dotSeparator'。

说实话，我真的不知道什么似乎“修复”了这个问题。我确实重新组织了CSS代码以获得更好的“继承”样式可读性，并添加了一个清晰的类和一个postContainer div。有人能发现一个主要的区别吗？ ：）

相关问题
最新问题