我一直在寻找以下问题的答案:

我有两个问题:

1. 在下面的图片中,文本的左边和右边有两个div,设置下边框和左/右边框很简单,但是我找不到如何缩短上边框的方法. 2、如何才能让它们像下图一样左右浮动?它们所在div被设置为Display Flex,因此浮动不起作用

borders

下面的Html

.divss {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  line-height: 2px;
  background: #bbb;
}

.small {
  font-family: futuraptdemi;
  font-size: 15px;
  letter-spacing: 1.5px;
}

.big {
  font-family: futuraptdemi;
  font-size: 50px;
}

.semisquarel {
  width: 135px;
  height: 135px;
  border-top: white solid 2px;
  border-left: white solid 2px;
  border-bottom: white solid 2px;
  border-right: none;
}

.semisquarer {
  width: 135px;
  height: 135px;
  border-top: white solid 2px;
  border-left: none;
  border-bottom: white solid 2px;
  border-right: white solid 2px;
}
<div class="divss">
  <div class="semisquarel"></div>
  <img src="images/Path 16.png" width="37px" height="50px"></br>
  <p class="small">BEVERAGES</p>
  <p class="big">PRODUCT</p>
  <p class="small">RUM, WHISKEY, VODKA AND MORE</p>
  <p class="big">RANGE</p>
  <div class="semisquarer"></div>
</div>

推荐答案

我对您的代码做了一些更改.我对.Semiquarel和Semiquer类使用了position: absolute属性,并将项与边距值对齐.为了缩短顶部边框,我在课后使用了::before.最后,为了对齐字母,我在letters div个标签中添加了p个标签

.divss {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  line-height: 2px;
}

.small {
  font-family: futuraptdemi;
  font-size: 15px;
  letter-spacing: 1.5px;
}

.big {
  font-family: futuraptdemi;
  font-size: 50px;
}

.semisquarel {
  position: absolute;
  margin-right: 400px;
  margin-top: 100px;
  width: 135px;
  height: 135px;
  border-left: rgb(8, 8, 8) solid 2px;
  border-bottom: rgb(3, 3, 3) solid 2px;
  border-right: none;
}

.semisquarer {
  margin-top: 100px;
  margin-left: 375px;
  position: absolute;
  width: 135px;
  height: 135px;
  border-left: none;
  border-bottom: rgb(10, 10, 10) solid 2px;
  border-right: rgb(7, 7, 7) solid 2px;
}

.semisquarel::before {
  content: "";
  position: absolute;
  bottom: 133px;
  left: -1px;
  border-top: 2px solid black;
  width: 50%;
}
.semisquarer::before {
  content: "";
  position: absolute;
  bottom: 133px;
  left: 68px;
  border-top: 2px solid black;
  width: 50%;
}

.letters {
  text-align: center;
  margin-top: -7px;
}

.letters .small {
  margin-top: 17px;
}

.letters .big {
  margin-top: 40px;
}

.letters .small2 {
  margin-top: 64px;
}

.letters .big2 {
  margin-top: 61px;
  font-size: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css">
    <title>Document</title>
</head>
<body>
    <div class="divss">
        <div class="semisquarel"></div>
        <img src="images/Path 16.png" width="37px" height="50px"></br>
        <div class="letters">
        <p class="small">BEVERAGES</p>
        <p class="big">PRODUCT</p>
        <p class="small2">RUM, WHISKEY, VODKA AND MORE</p>
        <p class="big2">RANGE</p>
        </div>
        <div class="semisquarer"></div>
      </div>
</body>
</html>

Html相关问答推荐

应用于文本而不是弹性容器的Flexbox属性

如何让QML`Text`元素内的链接在悬停时显示鼠标指针?

Tumblr博客:如何修复提交页面和询问页面框列计数问题?

首字下沉非字母字符

容器内的SVG图像没有响应

如何在元素的三条边中间换行边框?

使用响应迅速的网格系统,将两列保持在同一行,同时允许更多列用于更大的屏幕

默认情况下使用Disbale Scroll,但在单击图标后将其激活

Vutify中看不见的V行

Flex:第一个 div 有列,下一个 div 有行

在屏幕上每行 css 中的特定列居中

为什么 CSS 网格超出了父级?

发送带有图像的Google文档作为HTML格式的邮件正文不再起作用

如何并排放置部分?

如何在图片前面放置下拉框?

按钮显示:内联不换行

自定义进度条 Html 和 CSS 布局

两个按钮范围滑块的 CSS

尽管设置了 width:100% left:0,但居中对齐的 CSS 动画并不对称

悬停上的 CSS 水平zoom gallery 中的单个图像