對齊錨內的div

我希望<div class="status">@Resource.AccordionStatus</div> div與'@ item.Title'對齊。該div目前正在垂直居中。對齊錨內的div

//Accordion----------------------------------------------- 
 
$(document).ready(function() { 
 
    $(".accordion-desc").fadeOut(0); 
 
    $(".accordion").click(function() { 
 
    $(".accordion-desc").not($(this).next()).slideUp('fast'); 
 
    $(this).next().slideToggle(400); 
 
    }); 
 
}); 
 

 
$(".accordion").click(function() { 
 
    $(".accordion").not(this).find(".rotate").removeClass("down"); 
 
    $(this).find(".rotate").toggleClass("down"); 
 
}); 
 
//-----------------------------------------------------------

body { 
 
    background-color: #eee; 
 
    font-family: "Open Sans", sans-serif; 
 
} 
 

 
header { 
 
    background-color: #2cc185; 
 
    color: #fff; 
 
    padding: 2em 1em; 
 
    margin-bottom: 1.5em; 
 
} 
 

 
h1 { 
 
    font-weight: 300; 
 
    text-align: center; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    margin: 0 auto; 
 
} 
 

 
button { 
 
    background-color: #2cc185; 
 
    color: #fff; 
 
    border: 0; 
 
    padding: 1em 1.5em; 
 
} 
 

 
button:hover { 
 
    background-color: #239768; 
 
    color: #fff; 
 
} 
 

 
button:focus { 
 
    background-color: #239768; 
 
    color: #fff; 
 
} 
 

 
.accordion { 
 
    position: relative; 
 
    background-color: #fff; 
 
    display: inline-block; 
 
    width: 100%; 
 
    border-top: 1px solid #f1f4f3; 
 
    border-bottom: 1px solid #f1f4f3; 
 
    font-weight: 700; 
 
    color: #74777b; 
 
    vertical-align: middle; 
 
} 
 

 

 
/*Rotation-------------------------------------*/ 
 

 
.accordion .fa { 
 
    position: relative; 
 
    float: right; 
 
} 
 

 
.rotate { 
 
    -moz-transition: all 0.1s linear; 
 
    -webkit-transition: all 0.1s linear; 
 
    transition: all 0.1s linear; 
 
} 
 

 
.rotate.down { 
 
    -moz-transform: rotate(90deg); 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 

 

 
/*------------------------------------------*/ 
 

 
.link { 
 
    text-align: right; 
 
    margin-bottom: 20px; 
 
    margin-right: 30px; 
 
} 
 

 
.accordion h4 { 
 
    position: relative; 
 
    top: 0.8em; 
 
    margin: 0; 
 
    font-size: 14px; 
 
    font-weight: 700; 
 
} 
 

 
.accordion a { 
 
    position: relative; 
 
    display: block; 
 
    color: #74777b; 
 
    padding: 1em 1em 2.5em 1em; 
 
    text-decoration: none; 
 
} 
 

 
.accordion a:hover { 
 
    text-decoration: none; 
 
    color: #2cc185; 
 
    background-color: #e7ecea; 
 
    transition: 0.3s; 
 
} 
 

 
.accordion-desc { 
 
    background-color: #f1f4f3; 
 
    color: #74777b; 
 
    z-index: 2; 
 
    padding: 20px 15px; 
 
} 
 

 
@media (min-width:480px) { 
 
    .container { 
 
    max-width: 80%; 
 
    } 
 
} 
 

 
@media (min-width:768px) { 
 
    .container { 
 
    max-width: 1000px; 
 
    } 
 
} 
 

 
.accordion-desc p { 
 
    word-break: break-all; 
 
} 
 

 
.status { 
 
    position: relative; 
 
    float: right; 
 
    right: 20%; 
 
    vertical-align: middle; 
 
} 
 

 
.btn { 
 
    margin-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div class="accordion"> 
 
    <a href="#"> 
 
    <h4>@item.Title</h4> 
 
    <div class="status">@Resource.AccordionStatus</div> 
 
    <i class="fa fa-chevron-right rotate"></i> 
 
    </a> 
 
</div> 
 
<div class="accordion-desc"> 
 
    <h3>@Resource.AccordionProjectLead</h3> 
 
    <h4>Kay Wiberg</h4> 
 
    <h3>@Resource.AccordionDescription</h3> 
 
    <p> 
 
    @item.Description 
 
    <p> 
 
     <div class="link"> 
 
     <a href="@item.Url">@Resource.AccordionGoTo</a> 
 
     </div> 
 
</div>

來源

2017-07-20 AllramEst

請更新以下類。

.accordion h4 { 
    position: relative; 
    margin: 0; 
    font-size: 14px; 
    font-weight: 700; 
    float: left; 
}

變化作出：

移除頂部：0.8em;並剛剛添加float：left。

的問題是H4標籤佔據整個寬度和DIV標籤與右側對齊新的生產線邏輯設定。

來源

2017-07-20 13:24:25

謝謝！很棒！你認爲你得到了事物的概念。然後就是這樣一件小事，因爲這引發了你。再次感謝！ – AllramEst

你只需要使用display:inline-block對齊@item.Title到@Resource.AccordionStatus：

.accordion h4, .accordion .status { 
    display:inline-block; 
} 

.accordion .status { 
    top: 0.8em; 
}

來源

2017-07-20 13:22:46 Lindow

嘗試增加浮子留下您的H4

.accordion h4 { 
    position: relative; 
    /* top: 0.8em; */ 
    margin: 0; 
    font-size: 14px; 
    font-weight: 700; 
    float: left; 
}

的問題是，h4顯示爲塊元素，然後將您的浮動右元素推到底部...

來源

2017-07-20 13:23:54

糾正這一點：

.accordion h4 { 
     position: relative; 
     margin: 0; 
     font-size: 14px; 
     font-weight: 700; 
     display: inline-block; 
    }

來源

2017-07-20 13:27:20

對齊錨內的div

回答

相關問題