相关疑难解决方法(0)

我想把a label和a input[type=text]放在同一条线上,我希望input宽度能够填充包含元素的剩余宽度,而不管标签文本的长度如何(见第一张图片).

我试图用width: auto;的input,但它似乎有一个静态的宽度.我也尝试了width: 100%;,但是这会移动input到一个新的线(见第二张图).

如何使用CSS实现这一目标？

我有这个问题我无法找到解决方案:

我有3 div秒,其中两个位于第三个.

该div含有其他有一个百分比宽度.

第二个位于第一个内部,没有特定的宽度并且向左浮动.

第三个也在第一个内部确实具有特定的宽度并且向右浮动.

问题是如何让第二个div尽可能多的宽度？

因为它适合默认的内容.

<div id="a">
    <div id="b">
    </div>
    <div id="c">
    </div>
</div>
<style>
#a{
    width: 80%;
}
#b{
    width: ??;
    float:left;
}
#c{
    width: 50px;
    float:right;
}
</style>

正如标题所说,我想在一行中水平放置两个div.左侧div具有固定宽度(包含图像),而右侧div应占据空间的其余部分.

CSS:

.container{
  width:100%;
  background-color:#000000;
  height:auto;
}

.inner_left{
  width:150px;
  float:left;
  height:250px;
  background-color:#FF0000;
}

.inner_right{
  float:left;
  height:250px;
  width:78%;
}

HTML:

  <div class="container">
    <div class="inner_left">test</div>
    <div class="inner_right">Nam a congue risus. Mauris mattis facilisis nisi, eget convallis enim lobortis a. Curabitur non neque nec augue commodo ullamcorper sit amet et lorem! Proin tristique vitae lacus ut consectetur. In at convallis dolor, in laoreet dolor. Etiam in molestie enim! Nunc tincidunt pharetra magna, et sollicitudin enim sodales sed. Morbi pretium sollicitudin lorem, bibendum molestie …

目前我有一些类似于下面的代码。我试图用 300px 的设置宽度使红色列无响应，但保持蓝色列的响应性。

.specific-image-container {
    display: flex;
    position: relative;
    width: 100%;
}
.specific-image-column {
    flex: 4;
    background-color: blue;
}
.more-images-column {
    flex: 1;
    background-color: red;
}
.content {
  height: 300px;
}

<div class="specific-image-container">

    <div class="specific-image-column">
        <div class='content'></div>
    </div>
    
    <div class="more-images-column">
        <div class='content'></div>
    </div>
    
</div>