在HTML和CSS

Question

我正在开发一个网站。现在我正在美化我的网站。现在我在设计我的网站时遇到了问题。

这是我想要实现的目标

正如您在高亮区域中看到的那样，div中有一个图像和文本区域。我想让它响应。我的意思是，它将具有最大宽度，当用户降低屏幕尺寸时，它将变小，但它具有最小宽度。我的意思是父div不是固定大小。它会改变。

但我总是希望他们并排。但图像将始终具有固定的大小。无论屏幕尺寸如何变化，它都不会改变。但只有文本输入字段会根据父级响应。这是我的代码：

这是我的HTML

  <div>
    <div class="comment-form">
         <img class="comment-avatar" src="/Images/user_avatar.png" />
         <textarea placeholder='Please log in first' class="comment-textarea"></textarea>
    </div>
  </div>

这是我的CSS

.comment-form{
    padding:5px;
    border:1px solid #CFD8DC;
    width:100%;
    min-width:280px;
    max-width:490px;
}

.comment-avatar{
    width:60px;
    height:54px;
    object-fit:cover;
    border:1px solid #CFD8DC;
}

.comment-textarea{
    width:86%;
    display:inline-block;
    border-radius:0px;
    height:54px;
}

正如您在css中看到的那样，我将使用min-width和max-width将注释表单响应设置宽度设置为100％。头像图像将具有固定大小。问题是设置textarea的宽度。我总是希望图像和文本区域并排。我希望textarea占用表单区域的其余部分。所以我用百分比设置宽度。如您所见，现在宽度为86％。如果我将其设置为100％，则表格变为如下所示。

但是使用当前代码，我得到了第一张图片。但是当我调整屏幕大小时，它会变成这样的东西。

他们不再是并排的。所以我目前的代码没有响应。我想要的是我希望图像总是固定的一面，并希望textarea占用窗体容器的其余或剩余区域，无论屏幕尺寸如何变为。

Answer 1

也许，这有帮助...我刚添加box-sizing并使用calc来计算文字区域的宽度

＆＃13;

＆＃13;

.comment-form{
    padding:5px;
    border:1px solid #CFD8DC;
    width:100%;
    min-width:280px;
    max-width:490px;
    box-sizing: border-box
}

.comment-avatar{
    width:60px;
    height:54px;
    display: inline-block;
    border:1px solid #CFD8DC;
    box-sizing: border-box;

}

.comment-textarea{

    width: calc( 100% - 70px);
    display:inline-block;
    border-radius:0px;
    height:54px;
    display: inline-block;
    box-sizing: border-box;

}

＆＃13;

<div>
    <div class="comment-form">
         <img class="comment-avatar" src="https://upload.wikimedia.org/wikipedia/en/7/71/SmallTownSouthernMan.jpg" />
         <textarea placeholder='Please log in first' class="comment-textarea"></textarea>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

工作Fiddle

我删除了无关的css部分。 magic 与外部容器中的border-box和padding一起发生。

.comment-form{
  position: relative;
  width:100%;
  padding-left: 62px;
  min-width:280px;
  max-width:490px;    
  box-sizing: border-box;
}

.comment-avatar{
  position: absolute;
  width:60px;
  height:54px;
  left: 0;
}

.comment-textarea{
  width:100%;
  height:54px;
}

通过position: absolute从正常流程中取出头像，您可以将textarea宽度设置为100％，并使用外部表单元素上的填充来模拟偏移量。

Answer 3

三个步骤：

1. 将display:flex应用于父容器
2. 授予img固定宽度
3. 使用textarea
为calc()提供灵活的宽度

查看：

.comment-form {
display: flex;
width: 60vw;
height: 84px;
border: 1px solid rgb(191,191,191);
}

.comment-avatar {
width: 60px;
height: 60px;
margin: 12px;
background-color: rgb(127,127,127);
}

.comment-textarea {
width: calc(100% - 96px);
margin: 12px 12px 12px 0;
border: 1px solid rgb(63,63,63);
}

  <div>
    <div class="comment-form">
         <img class="comment-avatar" src="/Images/user_avatar.png" />
         <textarea placeholder='Please log in first' class="comment-textarea"></textarea>
    </div>
  </div>

 

Answer 4

我猜display: flex应该做得很好！

顺便说一下。 flexbox是一件好事：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.comment-form{
    padding:5px;
    border:1px solid #CFD8DC;
    width:100%;
    min-width:280px;
    max-width:490px;
    display: flex;  /* <-- right here :) */
}

.comment-avatar{
    width:60px;
    height:54px;
    object-fit:cover;
    border:1px solid #CFD8DC;
}

.comment-textarea{
    width:86%;
    display:inline-block;
    border-radius:0px;
    height:54px;
}

<div>
  <div class="comment-form">
    <img class="comment-avatar" src="/Images/user_avatar.png" />
    <textarea placeholder='Please log in first' class="comment-textarea"></textarea>
  </div>
</div>

Answer 5

这项工作对我来说，试试：

<div>
    <div class="comment-form">
         <div class="comment-avatar">
           <img src="/Images/user_avatar.png" />
         </div>
         <div class="textareawrap">
          <textarea placeholder='Please log in first' class="comment-textarea"></textarea>
         </div>

    </div>
  </div>

并在你的CSS中：

.comment-form{
    padding:5px;
    border:1px solid #CFD8DC;
    width:100%;
    min-width:280px;

}

.comment-avatar{
    width:60px;
    height:54px;
    object-fit:cover;
    border:1px solid #CFD8DC;
    position: absolute;
}

.comment-textarea{
    width:86%;
    display:inline-block;
    border-radius:0px;
    height:54px;
    margin-left: 80px;
}

Answer 6

还尝试添加注释来自显示属性，如下所示：

.comment-form{
    padding:5px;
    border:1px solid #CFD8DC;
    width:100%;
    min-width:280px;
    max-width:490px;
    display:inline-flex
}

但请注意，值“flex”和“inline-flex”需要在Safari中使用前缀。对于“flex”，使用“display：-webkit-flex”，对于“inline-flex”，使用“display：-webkit-inline-flex;”。