jquery - grails 中带有 2 个按钮的 div

Question

我使用以下 div 样式创建了 2 个按钮:

.btn-section{
    display: inline;

}

这是 gsp 文件中的代码:

<div class="btn-section  feed-meta">
    <g:if test="${currentUser != null}">
        <likeable:button bean="${statusMessage}" user="${currentUser}" source="news" directLink="${directLink}"
                         cssClass=" btn-tertiary"/>
    </g:if>
    <g:if test="${directLink != 'true'}">
        <a href="#" class="comment-toggle btn-tertiary">Comment</a>
    </g:if>
</div>

btn-tertiary 的 CSS 是:

.btn-tertiary{
    padding:15px 25px 15px 25px;
    background-color:#f2f2f2;
    font-family:"font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif";
    font-weight:400!important;
    font-size:13px!important;
    color: #444!important;
    border:none;
}

我无法成功地将它们以相同的宽度彼此相邻放置。

p.s 按钮的 div 应该与屏幕的宽度一致 <

div class="mod activities home">
    <div class="mod head update">
        <a href="/threebaysover/profile?id=Ng%3D%3D" class="avatar-image square">

                <img src="http://331e84836dff4bcefe4c-0b83aa77f26cb44bf666af6296cf13e3.r75.cf2.rackcdn.com/c957b62d-b771-40b0-97a9-f8508b3d6487.jpg" alt="Avatar" onerror="this.src='http://c663375.r75.cf2.rackcdn.com/no-avatar.png'"/>

        </a>


        <span class="profile-tool-tip dotted" url="/threebaysover/profile/profileTooltip/Ng%3D%3D"><a href="/threebaysover/profile?id=Ng%3D%3D" class="title-default">Sarit Rotshild</a></span>




    <span class="text-light">
         </br>

            4 hours ago

    </span>

    </div>

    <div class="mod-body feed feed-238 comment-1"  url="/threebaysover/news/addComment" status="238" data-remove-url="/threebaysover/news/removeComment">


            <p class="max-length">

                vbcbcvbvcbcvcv



            </p>

    <div class="text-small" style="padding-bottom: 15px">
        <div id="postSummery-238">likes <span id="likeNum-238">2</span>
                comments <span id="commentNum-238"> 1</span></div>likes 2comments 1


    </div>
        <div class="btn-section  feed-meta">



                <span id="8-user-238-news"><a   class=" btn-tertiary" onclick="jQuery.ajax({type:'POST',data:{'subjectId': '8','subjectType': 'user','targetId': '238','targetType': 'news','cssClass': ' btn-tertiary','alternateCssClass': 'null'}, url:'/threebaysover/likeable/unlike',success:function(data,textStatus){jQuery('#8-user-238-news').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){}});completeLike(238,true,false);">Unlike</a></span>

             <a  href="#" class="comment-toggle btn-tertiary" >Comment</a>














            <div class="feed-like">

    <div class="feed-comments">

Answer 1

以下是使用 flex 属性 ( http://www.w3schools.com/cssref/css3_pr_flex.asp ) 的示例:

.btn-section {
    display: flex;
    width: 100%;
}
.btn-tertiary {
    padding:15px 25px 15px 25px;
    background-color:#f2f2f2;
    font-family:"font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif";
    font-weight:400!important;
    font-size:13px!important;
    color: #444!important;
    border:none;
    -webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;
    text-align: center;
}
.btn-tertiary-red {
    background-color:red;
}

<div class="btn-section  feed-meta"> 
    <a href="#" class="btn-tertiary">foo</a>  
    <a href="#" class="btn-tertiary btn-tertiary-red">Comment</a>
</div>