連續2列，百分比寬度

我在排列2列時出現問題。 2％寬度的第一列，以及98％寬度的第二列。我該如何讓他們工作？我已經嘗試float：left;但它似乎不是一個正確的方法來做到這一點。連續2列，百分比寬度

Codepen：https://codepen.io/rae0724/pen/gWGvxG

<div class="moonsun"> 
    <div class="moon">Moon<br><br></div> 
    <div class="sun">Sun<br><br><br><br><br><br></div> 
</div> 

.moonsun { 
    width: 100%; 
} 

.moon { 
    width: 2%; 
    background: yellow; 
    display:inline-block; 
    margin:0; 
    padding:0; 
} 

.sun { 
    width: 98%; 
    background: red; 
    display:inline-block; 
    margin:0; 
    padding:0; 
}

來源

2017-05-05 demoncoder

inline-block計空格的內容，這就是爲什麼它不是100％的寬度設定。設置這些元素，你可以使用下面的方法

.moonsun { 
 
    width: 100%; 
 
} 
 

 
.moon { 
 
    width: 2%; 
 
    background: yellow; 
 
    display:inline-block; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.sun { 
 
    width: 98%; 
 
    background: red; 
 
    display:inline-block; 
 
    margin:0; 
 
    padding:0; 
 
}

<div class="moonsun"> 
 
    <div class="moon">Moon<br><br></div><!-- 
 
    --><div class="sun">Sun<br><br><br><br><br><br></div> 
 
</div>

或

.moonsun { 
 
    width: 100%; 
 
    font-size: 0px; 
 
} 
 

 
.moon { 
 
    width: 2%; 
 
    background: yellow; 
 
    display:inline-block; 
 
    margin:0; 
 
    padding:0; 
 
    font-size: 16px; 
 
} 
 

 
.sun { 
 
    width: 98%; 
 
    background: red; 
 
    display:inline-block; 
 
    margin:0; 
 
    padding:0; 
 
    font-size: 16px; 
 
}

<div class="moonsun"> 
 
    <div class="moon">Moon<br><br></div> 
 
    <div class="sun">Sun<br><br><br><br><br><br></div> 
 
</div>

或

.moonsun { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
.moon { 
 
    width: 2%; 
 
    background: yellow; 
 
    display:inline-block; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.sun { 
 
    width: 98%; 
 
    background: red; 
 
    display:inline-block; 
 
    margin:0; 
 
    padding:0; 
 
}

<div class="moonsun"> 
 
    <div class="moon">Moon<br><br></div> 
 
    <div class="sun">Sun<br><br><br><br><br><br></div> 
 
</div>

來源

2017-05-05 11:02:34

試試這個：

.moonsun { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
.moon { 
 
    width: 2%; 
 
    background: yellow; 
 
    display:inline-block; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.sun { 
 
    width: 98%; 
 
    background: red; 
 
    display:inline-block; 
 
    margin:0; 
 
    padding:0; 
 
}

<div class="moonsun"> 
 
    <div class="moon">Moon<br><br></div> 
 
    <div class="sun">Sun<br><br><br><br><br><br></div> 
 
</div>

來源

2017-05-05 11:01:37 Mers

使用display:flex你可以很容易地做到這一點。在你的代碼中有一個問題，所以我會建議你使用這種方法。 word-break:break-all到調整文本在2% div，因爲它的寬度可能很小。

.moonsun { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
.moon { 
 
    width: 2%; 
 
    background: yellow; 
 
    margin: 0; 
 
    padding: 0; 
 
    flex: 1; 
 
    word-break: break-all 
 
} 
 

 
.sun { 
 
    width: 98%; 
 
    background: red; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="moonsun"> 
 
    <div class="moon">Moon<br><br></div> 
 
    <div class="sun">Sun<br><br><br><br><br><br></div> 
 
</div>

來源

2017-05-05 11:02:43

連續2列，百分比寬度

回答

相關問題