0

私はすでに検索していますが、正確な解決策はありません。私は2つの列を作ろうとしています:

左の液体 + 右の液体。

左の列には 100% の入力ボックスが含まれてwidthおり、左の列widthは右の列に依存していますwidth。

  • B は単なるテキスト div ですが、テキストの長さはわかりません。ダイナミックレングスです。

  • A は単なる入力ボックスです。

したがって、B が長いテキストの場合、A は短くする必要があります。

下の画像を見てください

下の画像を見てください

なにか提案を？

4

2 に答える 2

0

これを試して

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Site name</title>
    </head>
<style>
        #container{
         width: 900px;
    }
    #container:after{clear: both; display: table; content: "";}
    #container:before{ display: table; content: "";}
    .left-column{
        width: 400px;
        float: left;
        padding: 5px; 
        background: green;
        box-sizing: border-box;
    }
    .left-column input{width: 100%;}
    .right-column{
        float: right;
        padding: 5px;
        width: 500px;
        background: violet;
        box-sizing: border-box;
    }
</style>
<body>
   <div id="container"> 
       <div class="left-column">
           <input name="f-name" type="text"></input>
       </div>
       <div class="right-column">
           Lorem ipsum dolor sit amet, consectetur 
           adipiscing elit, sed do eiusmod tempor 
           incididunt ut labore et dolore magna aliqua. 
           Ut enim ad minim veniam, quis nostrud 
           exercitation ullamco laboris nisi ut 
           aliquip ex ea commodo consequat. Duis 
           aute irure dolor in reprehenderit in 
           voluptate velit esse cillum dolore eu 
           fugiat nulla pariatur. Excepteur sint 
           occaecat cupidatat non proident, sunt 
           in culpa qui officia deserunt mollit 
           anim id est laborum.
       </div>
   </div>
</body>
</html>
于 2016-08-27T10:05:03.883 に答える