CSS讓元素的寬度自動增長，同時母公司寬度自動

我有一個HTML結構類似這樣的一些基本風格CSS讓元素的寬度自動增長，同時母公司寬度自動

.container { 
 
    display: block; 
 
    width: auto; 
 
    /* this is must */ 
 
    height: auto; 
 
    /* this is must */ 
 
    max-width: 300px; 
 
} 
 

 
.container .row { 
 
    display: flex; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.container .row .left { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: auto; 
 
} 
 

 
.container .row .right { 
 
    display: inline-block; 
 
    width: auto; 
 
    height: auto; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="left"></div> 
 
    <div class="right"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="left"></div> 
 
    <div class="right"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="left"></div> 
 
    <div class="right"></div> 
 
    </div> 
 
</div>

的風格可能不工作，我只貼的基本組成部分它。我想要實現的是，父元素有一個最大寬度，它包含多行，每行有兩個元素，'左'和'右'。我將固定寬度設置爲'left'元素，將最小寬度/最大寬度設置爲'right'元素。我希望隨着內容的增長，右元素的寬度會自動增長，直到最大寬度，但如果內容很短，正確的元素也會縮小。我試過桌子和彈性盒，但沒有運氣。感謝您的幫助

來源

2017-08-09 mok

問題是因爲您必須指定.right類的最大寬度。

1）整個容器的最大寬度：300px並且留下寬度：是100px，所以剩餘的200px;你可以把它放在正確的行。

2）增加了更好的理解背景。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
</head> 
 
<style> 
 
    .container { 
 
     display: block; 
 
     width: auto; /* this is must */ 
 
     height: auto; /* this is must */ 
 
     max-width: 300px; 
 
    } 
 
    .container .row{ 
 
     display: flex; 
 
     width: 100%; 
 
     height: auto; 
 
     background-color:Red; 
 
    } 
 
    .container .row .left{ 
 
     display: inline-block; 
 
     width: 100px; 
 
     background-color:yellow; 
 
    } 
 
    .container .row .right{ 
 
     display: inline-block; 
 
     height: auto; 
 
     background-color:green; 
 
     max-width: 200px; 
 
     overflow:hidden; 
 
    } 
 
</style> 
 
<body> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="left">qweqweqwe</div> 
 
     <div class="right">qweqweqwew<p>afdllssssssssdddddddddssssssssss</p><p>asdasdasdadsas</p></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="left">qweqweqwe</div> 
 
     <div class="right">qweqweqwe</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="left">qweqweqw</div> 
 
     <div class="right">qweqweqweqwe</div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

來源

2017-08-09 07:39:58

非常感謝您的幫助，對不起，回覆這麼晚了，我是在做其他任務的一對夫婦的日子。你的答案正在起作用。但不知何故，它不是在我的網站上工作。我創建了一個[codepen示例]（https://codepen.io/hansen1416/pen/RZgYbd）。我的權利要素不會增長到200px，我只花了幾個小時來解決這個問題。它幾乎讓我發瘋。 – mok

這裏找到codepen樣品，並與您的要求進行檢查。另外，讓我知道是否有什麼，你想從中獲得。

.container .row{ 
     display: flex; 
     width: 100%; 
     height: auto; 
    } 
    .container .row .left{ 
     display: inline-block; 
     width: 100px; 
     height: auto; 
    } 
    .container .row .right{ 
     display: inline-block; 
     width: auto; 
     height: auto; 
     max-width: 150px; 
     overflow: hidden; 
    }

來源

2017-08-09 07:41:10 Abinthaha

非常感謝您的幫助，很抱歉回覆這麼晚，我還在做幾天的任務。你的答案正在起作用。但不知何故，它不是在我的網站上工作。我創建了一個[codepen示例]（https://codepen.io/hansen1416/pen/RZgYbd）。我的權利要素不會增長到200px，我只花了幾個小時來解決這個問題。它幾乎讓我發瘋。 – mok

添加display: flex您.row類並將min-width: 100px到.right - 看到這裏工作的jsfiddle：https://jsfiddle.net/o3o9j4za/1/

<div class="container"> 
<div class="row"> 
    <div class="left">1234</div> 
    <div class="right">4312</div> 
</div> 
<div class="row"> 
    <div class="left">1235</div> 
    <div class="right">qweqwereqwr</div> 
</div> 
<div class="row"> 
    <div class="left">5342</div> 
    <div class="right">3g43g3g3g</div> 
</div>

.container { 
    display: block; 
    width: auto; /* this is must */ 
    height: auto; /* this is must */ 
    max-width: 300px; 
} 
.container .row{ 
    width: 100%; 
    height: auto; 
    display:flex; 
} 
.container .row .left{ 
    display: inline-block; 
    height: auto; 
    width: 100px; 
    background-color:#ff0; 
} 
.container .row .right{ 
    display: inline-block; 
    width: auto; 
    min-width: 100px; 
    height: auto; 
    background-color:#f0f; 
}

注意，你的Flex容器（.row）受.container的最大寬度影響。

（編輯：誤讀了一下 - 應該是像你想現在？）

來源

2017-08-09 07:42:51

非常感謝您的幫助，很抱歉回覆這麼晚，我在做幾天的任務。你的答案正在起作用。但不知何故，它不是在我的網站上工作。我創建了一個[codepen示例]（https://codepen.io/hansen1416/pen/RZgYbd）。我的權利要素不會增長到200px，我只花了幾個小時來解決這個問題。它幾乎讓我發瘋。 – mok

我想你可以試試這個爲你的類「正確的」

.right{ 
    width:calc(100% - 100px); 
}

來源

2017-08-09 07:48:37

這個怎麼樣Flexbox的解決方案？我認爲最接近你在找什麼：

<div class="container"> 
    <div class="row"> 
    <div class="left">test left</div> 
    <div class="right">test right</div> 
    </div> 
    <div class="row"> 
    <div class="left">test left</div> 
    <div class="right">test right</div> 
    </div> 
    <div class="row"> 
    <div class="left">test left</div> 
    <div class="right">test right</div> 
    </div> 
</div> 


.container { 
    padding: 2px; 
    border: 1px solid green; 
    max-width: 300px; 
} 

.row { 
    display: flex; 
    padding: 2px; 
    border: 1px solid red; 
    max-width: 300px; 
} 

.left { 
    padding: 2px; 
    border: 1px solid blue; 
    width: 100px; 
} 

.right { 
    padding: 2px; 
    border: 1px solid purple; 
    width: 180px; 
}

和提琴： https://jsfiddle.net/xr7ebmsz/

來源

2017-08-09 07:49:49 Happysmithers

CSS讓元素的寬度自動增長，同時母公司寬度自動

回答

相關問題