在柱和柱流體之間具有固定邊界的兩列布局，一個是固定的？

Question

我是html/css的新手，我很難設法設置一個雙列設計，其中左欄是固定寬度爲300px的文本列，右欄是寬度爲40的照片屏幕的百分比。此外，這也是我掛斷電話的地方，即使在不同的屏幕尺寸下，兩列之間應始終保持固定的餘量。我需要它，因此任何多餘的屏幕寬度超出了文本列佔用的300像素，並且照片佔用的屏幕的40％均勻分佈在屏幕的左側和右側邊緣，而不是進入兩列之間。目前，當我展開屏幕時，所有多餘的空間都會進入兩列之間（而我希望在那裏有一個固定的邊距，而多餘的空間則去邊緣）。什麼是最好的方法來做到這一點？

我已經嘗試了幾種不同的方法，但這裏是我的代碼爲最接近我已經得到了：

<div class="group"> 
     <div class="f"> 
      <h1> Header Here</h1> 
      <p>Paragraph with text here. Paragraph with text here.</p> 
     </div> 
     <img class="pic" src="img/picture.jpg"/> 
</div> 

.pic { 
    width: 40%; 
    margin: 0; 
    padding: 0; 
    display: inline-block; 
} 

.f { 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 300px; 
    text-align: justify; 
    display: inline-block; 
} 

.group:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

感謝這麼多的幫助。我嘗試過使用內嵌塊和相對/絕對來浮動它。

Answer 1

如果我理解正確你的問題，你想要的文字和圖片之間的固定寬度是多少？而任何額外的空間均勻分佈在兩側？

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 
.group { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.f { 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
} 
 
.middle { 
 
    width: 10%; 
 
} 
 
.pic { 
 
    width: 40%; 
 
    height: 200px; 
 
    background-color: green; 
 
}

<div class="group"> 
 
    <div class="f"> 
 
     fixed width: 300px; 
 
    </div> 
 
    <div class="middle"> 
 
     fixed width: 10%; 
 
    </div> 
 
    <div class="pic"> 
 
     fixed width: 40%; 
 
    </div> 
 
</div>

Answer 2

這是你想要實現的東西嗎？

.pic { 
 
    max-width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 

 
} 
 
.group { 
 
    width: 100%; 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 
.group > * { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 

 
.group .f { 
 
    width: 300px; 
 
}

<div class="group"> 
 
    <div class="f"> 
 
    <h1> Header Here</h1> 
 
    <p>Paragraph with text here. Paragraph with text here.</p> 
 
    </div> 
 
    <img class="pic" src="http://lorempixel.com/output/people-q-c-640-480-6.jpg" /> 
 
</div>