创建一个 Div 横幅，右侧有一个浮动的提交框。 66/33 比例？

Question

Example_submissionSection

您好！

我能描述的最好方法是创建一个可视化示例（已附）。我创建了一个带有背景颜色的 div 横幅，并希望在右侧包含一个提交框——间距为 66/33% 分配？

您建议如何编码？使用盒子的基本 HTML/CSS--CSS 是设置和工作正常。主要问题是提交框 div 比横幅框大（垂直）。我的大脑很难理解这个想法——上述区域的上方和下方已经有文本——所以绝对位置是不可能的 (?)。

Answer 1

.parent {
  display: flex;
  padding: 2.5rem;
  align-items: center;
  position: relative;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  gap: 2rem;
  box-sizing: border-box;
}
.red {
    position: absolute;
    height: calc(100% - 12rem);
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: red;
    z-index: -1;
}
.left-col {
  width:66.66%;
  color:white;
  height:100%;
}
.right-col {
  width:33.33%;
  height:100%;
}

.right-col .content {
  border:2px solid blue;
  height: 250px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 2.5rem;
}

<div class="parent">
  <div class="red"></div>
  <div class="left-col">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
  </div>
  <div class="right-col">
    <div class="content">
      <span>We invite you to tell your pandemic story through recipes, stories, and images.
        <button value="Contribute"></button>
    </div>
  </div>
</div>

创建一个 Div 横幅，右侧有一个浮动的提交框。 66/33 比例？

Creating a Div banner with a floating Submission-Box to the right. 66/33 ratio?

html

css

flexbox

position

box