Ausrichtungsproblem mit dem Inhalt innerhalb der zwei Inline-div?

Question

Ich habe zwei div und innerhalb div mehrere div ist da, und ich bin mit der Ausrichtung Problem, was Inhalt ist innerhalb der div ist nicht richtig ausgerichtet.

CSS-Code:

.breadcrumb-nav{ 
    margin-left: 230px; 
    left: 70px; 
    top: 70px; 
    width: 1291px; 
    height: 66px; 
    opacity: 100%; 
    background: #EFEFEF; 
} 

.grid{ 
    margin-left: 230px; 
} 

/*Left Section Styling */ 

.left-content{ 
    top :104px; 
    left: 151px; 
    opacity: 100%; 
    height: 20px; 
    width: 194px; 
} 

.shown-device{ 
    line-height: 20px; 
    width :147px; 
    font-size: 16px; 
    color :#101010; 
    margin-top: 15px; 
    margin-left: 40px; 
} 


.filter-by{ 
    left: 80px; 
    top: 177px; 
    width: 194px; 
    height: 28px; 
    background: #D8D8D8; 
    margin-top: 6px; 
} 

.filter-by-heading-left{ 
    left: 86px; 
    top: 182px; 
    height: 17px; 
    padding:5px 134px 6px 6px; 
    font-weight: bold; 
    font-size: 13px; 
    line-height: 17px; 
} 

.filter-by-heading-right{ 
    left: 225px; 
    top: 182px; 
    height: 17px; 
    padding:5px 6px 8px 133px; 
    font-size: 11px; 
    line-height: 17px; 
} 

/*Right Section Styling*/ 

.right-content .filter{ 
    margin-left: 229px; 
    margin-top: 18px; 
} 

.filter-heading{ 
    width: 39px; 
    height: 16px; 
    font-size: 13px; 
    line-height: 16px; 
    color: #666666; 

} 

HTML-Code:

<div class= "notification-content"> 
    <div class = "breadcrumb-nav"> 
     <h1>Devices</h1> 
    </div> 
    <div class = "grid"> 
     <div class = "left-content"> 
      <p class ="shown-device"><strong>1487</strong> device shown</p> 
      <div class = "filter-by"> 
       <p class ="filter-by-heading-left">Filter By:</p> 
       <a class =" filter-by-heading-right">Clear All</a> 
      </div> 
     </div> 
     <div class = "right-content"> 
      <div class = "filter"> 
       <p class ="filter-heading">Filters:</p> 
      </div> 
<!-- 
      <div class = "soritng "> 
       <select class = "sorting-select-box"> 
        <option>Test1</option> 
        <option>Test2</option> 
        <option>Test3</option> 
       </select> 
      </div> 
--> 

     </div> 
    </div> 
</div> 

Ich füge den Screenshot auch Alles hat inline zu kommen mit Filter ALLE: und Filter hat mit Geräte gezeigt zu kommen, wie in Befestigungs hervorgehoben. Hier

Answer 1

ist ein fiddle

Änderungen in der folgenden .. Hope this

.left-content{ 
    top :104px; 
    left: 151px; 
    opacity: 100%; 
    height: 20px; 
    width: 0; 
    float: left; 
} 

.right-content{ 
    float: right; 
} 

.filter-by-heading-right{ 
    right: 0; 
    top: -35px; 
    height: 17px; 
    padding: 0; 
    position: relative; 
    font-size: 11px; 
    line-height: 17px; 
    display: block; 
    float: right; 
} 

Lassen Sie mich hilft mit, ob Sie Ihre Ausgabe so brauchen ..

Answer 2

Versuch zu sehen, dass link . Und ich denke, dass Sie nur zwei Spalten Layout benötigen. Sie können viele gute Beispiele finden, wie man es einfach googelt.

I geändert:

.left-content{ 
    top :104px; 
    left: 151px; 
    opacity: 100%; 
    float: left; 
    width: 60%; 
    /*height: 20px;*/ 
    /*width: 294px;*/ 
} 
.shown-device{ 
    line-height: 20px; 
    width :147px; 
    font-size: 16px; 
    color :#101010; 
    /*margin-top: 15px;*/ 
    margin-left: 120px; 
} 
.filter-by-heading-left{ 
    /*left: 86px; 
    top: 182px; 
    height: 17px; 
    padding:5px 134px 6px 6px; 
    font-weight: bold; 
    font-size: 13px; 
    line-height: 17px;*/ 
} 
.right-content .filter{ 
    float: right; 
    /*margin-left: 329px;*/ 
    width: 40%; 
    margin-top: 6px; 
} 


flag 

Es gibt so viele Lösungen, können Sie dies sehen this