html - 什么是完成我的 "cross?"的简单 CSS 方法

Question

我想为这个留言板创建一个特殊的框/div，它将十字的顶部添加到这个元素中。理想情况下，此解决方案将允许在栏左侧放一张小图片，而横幅/ Logo 将占据顶部栏右侧的空间。

我不知道如何创建两个 div 元素，其中左侧是固定宽度，右侧填充剩余的浏览器空间。链接到测试站点:https://bchristiancross.runboard.com

#wrapper {
  position: relative;
  width: 95%;
  margin: 0 auto;
  border: 2px solid #FF0000;
}

#header {
  text-align: center;
  height: 175px;
  background: #FFFF80;
}

#content,
#footer {
  margin-left: 175px;
  border: 1px solid #0000FF;
  border-left: 50px solid #0000FF;
}

#content:after {
  content: '';
  position: absolute;
  width: 400px;
  left: 0;
  top: 125px;
  border-top: 50px solid #0000FF;
}

<div id="wrapper">

  <div id="header">
    board banner/logo goes here
    <h1>Your board name here</h1>
  </div>
  <!-- end header -->

  <div id="content">
  </div>
</div>

Answer 1

使用“css flex”，希望对您的问题有所帮助。 有好的网址可以学习一下CSS Flex

以下代码是您可能想要做的示例，希望它能回答您的问题。

index.html

<div id="header" class="flex_container">
  <div class="flex_left">
    <img alt="picture" src="">
  </div>
  <div class="flex_right">
    board banner/logo goes here
    <h1>Your board name here</h1>
  </div>
</div>

主.css

.flex_container {
  display: flex;
}

.flex_left{
  min-width: 175px;
  padding-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 50px solid #0000FF;
}

.flex_right{
  width: 100%;
}