什么是完成我的“十字架”的简单CSS方法？

Question

我想为此留言板创建一个特殊的框/格，以将十字架的顶部添加到该项目中。理想情况下，此解决方案将在条形图的左侧留一小幅图片，而横幅/徽标将占据顶部条形图的右侧空间。

我无法全神贯注于如何创建两个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>

main.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%;
}