内側div幅を動的にする

Question

残りの幅を.inner divにしたいと思います。同時に、兄弟（&スパンタグ）は動的な幅にすることができます。

display: flexを使用してhttps://jsfiddle.net/pge8rqw0/

.top {} .inner { 
 
    border-bottom: 1px solid black; 
 
    background-color: green; 
 
    width: auto; 
 
    float: left; 
 
    width: 50px; 
 
} 
 
a { 
 
    float: left; 
 
} 
 
span { 
 
    float: right; 
 
    background-color: red; 
 
}

<div class="top"> 
 
    <a href="http://www.w3schools.com">Visit W3Schools.com!</a> 
 
    <div class="inner"></div> 
 
    <span>Html is good</span> 
 
</div>

おかげ

Answer 1

ソリューションで&以下 コード。

.top { 
 
    display: flex; 
 
} 
 
.inner { 
 
    border-bottom: 1px solid yellow; 
 
    background-color: green; 
 
    min-width: 50px; 
 
    flex: 1; 
 
} 
 
a { 
 
    background-color: #f5f5f5; 
 
} 
 
span { 
 
    background-color: red; 
 
}

<div class="top"> 
 
    <a href="http://www.w3schools.com">Visit W3Schools.com!</a> 
 
    <div class="inner"></div> 
 
    <span>Html is good</span> 
 
</div>

Answer 2

次のように、あなたはflexせずにそれを達成することができ、あなたのコード内の要素の順序を変更することができる場合：

.top {overflow: hidden;} 
 
a { 
 
    float: left; 
 
} 
 
span { 
 
    float: right; 
 
    background-color: red; 
 
} 
 
.inner { 
 
    border-bottom: 1px solid black; 
 
    background-color: green; 
 
    overflow: hidden; 
 
}

<div class="top"> 
 
    <a href="http://www.w3schools.com">Visit W3Schools.com!</a> 
 
    <span>Html is good</span> 
 
    <div class="inner">Inner Content</div> 
 
</div>