更改CSS元素的位置（装饰花括号从左到右）

时间：2019-02-01 23:22:45

标签： html css

我才刚刚开始学习HTML，CSS和Web编码！我找到了CSS花括号元素的示例，其中花括号（{）位于内容的左侧。我想做的是将其切换为左右，使其位于内容的右手边，并在相反的花括号（}）上。

有人可以为我指出如何实现这一目标的正确方向吗？！

感谢您提供的任何帮助

    <!DOCTYPE html>
<html lang='en' class=''>
    <head>
        <style class="cp-pen-styles">
            .curly-braced-block {
              position: relative;
              margin: 20px 0;
            }
            .curly-braced-block .brace-left {
              top: 0;
              left: 0;
              float: left;
              width: 20px;
              height: 100%;
              position: absolute;
            }
            .curly-braced-block .brace-left .brace-top,
            .curly-braced-block .brace-left .brace-bottom {
              position: absolute;
              width: 10px;
              height: 50%;
              left: 10px;
            }
            .curly-braced-block .brace-left .brace-top {
              top: 0;
            }
            .curly-braced-block .brace-left .brace-bottom {
              top: 50%;
            }
            .curly-braced-block .brace-left .brace-top:before,
            .curly-braced-block .brace-left .brace-top:after,
            .curly-braced-block .brace-left .brace-bottom:before,
            .curly-braced-block .brace-left .brace-bottom:after {
              content: "";
              height: 50%;
              width: 10px;
              display: block;
              position: absolute;
            }
            .curly-braced-block .brace-left .brace-top:before {
              top: 0;
              left: 0;
              border-left: 3px solid black;
              -webkit-border-top-left-radius: 10px;
              -moz-border-radius-topleft: 10px;
              border-top-left-radius: 10px;
            }
            .curly-braced-block .brace-left .brace-top:after {
              bottom: 0;
              left: -10px;
              border-right: 3px solid black;
              -webkit-border-bottom-right-radius: 10px;
              -moz-border-radius-bottomright: 10px;
              border-bottom-right-radius: 10px;
            }
            .curly-braced-block .brace-left .brace-bottom:before {
              top: 0;
              left: -10px;
              border-right: 3px solid black;
              -webkit-border-top-right-radius: 10px;
              -moz-border-radius-topright: 10px;
              border-top-right-radius: 10px;
            }
            .curly-braced-block .brace-left .brace-bottom:after {
              bottom: 0;
              left: 0;
              border-left: 3px solid black;
              -webkit-border-bottom-left-radius: 10px;
              -moz-border-radius-bottomleft: 10px;
              border-bottom-left-radius: 10px;
            }
            .curly-braced-block .content {
              text-align: left;
              margin-left: 25px;
            }
        </style>
    </head>
    <body>
    <div class="curly-braced-block">
      <div class="brace-left">
        <div class="brace-top"></div>
        <div class="brace-bottom"></div>
      </div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et fermentum metus. Proin eget euismod dui. Mauris consectetur ipsum orci, nec iaculis odio ullamcorper sit amet. In hac habitasse platea dictumst. Nulla imperdiet, ligula sed dignissim lobortis,
        ligula turpis venenatis sem, ac luctus enim leo quis ipsum. In id mollis risus. Vivamus auctor arcu nec blandit cursus. Vestibulum hendrerit suscipit tellus at luctus. Duis convallis libero sit amet nulla lobortis aliquam. Nullam sodales facilisis
        massa, sed semper velit semper in. Nulla congue aliquam felis ac fringilla.s venenatis sem, ac luctus enim leo quis ipsum. In id mollis risus. Vivamus auctor arcu nec blandit cursus. Vestibulum hendrerit suscipit tellus at luctus. Duis convallis libero sit amet nulla lobortis aliquam. Nullam sodales facilisis
        massa, sed semper velit semper in. Nulla congue aliquam felis ac fringilla.
      </div>
    </div>
    </body>
</html>

1 个答案:

答案 0 :(得分：0)

可以很容易地通过与CSS左右交换创建.brace-right类。

然后，在HTML中，只需将class="brace-left"更改为class="brace-right" 

.curly-braced-block {
  position: relative;
  margin: 20px 0;
}
.curly-braced-block .brace-right {
  top: 0;
  right: 0;
  float: right;
  width: 20px;
  height: 100%;
  position: absolute;
}
.curly-braced-block .brace-right .brace-top,
.curly-braced-block .brace-right .brace-bottom {
  position: absolute;
  width: 10px;
  height: 50%;
  right: 10px;
}
.curly-braced-block .brace-right .brace-top {
  top: 0;
}
.curly-braced-block .brace-right .brace-bottom {
  top: 50%;
}
.curly-braced-block .brace-right .brace-top:before,
.curly-braced-block .brace-right .brace-top:after,
.curly-braced-block .brace-right .brace-bottom:before,
.curly-braced-block .brace-right .brace-bottom:after {
  content: "";
  height: 50%;
  width: 10px;
  display: block;
  position: absolute;
}
.curly-braced-block .brace-right .brace-top:before {
  top: 0;
  right: 0;
  border-right: 3px solid black;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  border-top-right-radius: 10px;
}
.curly-braced-block .brace-right .brace-top:after {
  bottom: 0;
  right: -10px;
  border-left: 3px solid black;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-left-radius: 10px;
}
.curly-braced-block .brace-right .brace-bottom:before {
  top: 0;
  right: -10px;
  border-left: 3px solid black;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
}
.curly-braced-block .brace-right .brace-bottom:after {
  bottom: 0;
  right: 0;
  border-right: 3px solid black;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  border-bottom-right-radius: 10px;
}
.curly-braced-block .content {
  text-align: justify;
  margin-right: 25px;
}
<!DOCTYPE html>
<html lang='en' class=''>
    <head>
    </head>
    <body>
    <div class="curly-braced-block">
      <div class="brace-right">
        <div class="brace-top"></div>
        <div class="brace-bottom"></div>
      </div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et fermentum metus. Proin eget euismod dui. Mauris consectetur ipsum orci, nec iaculis odio ullamcorper sit amet. In hac habitasse platea dictumst. Nulla imperdiet, ligula sed dignissim lobortis,
        ligula turpis venenatis sem, ac luctus enim leo quis ipsum. In id mollis risus. Vivamus auctor arcu nec blandit cursus. Vestibulum hendrerit suscipit tellus at luctus. Duis convallis libero sit amet nulla lobortis aliquam. Nullam sodales facilisis
        massa, sed semper velit semper in. Nulla congue aliquam felis ac fringilla.s venenatis sem, ac luctus enim leo quis ipsum. In id mollis risus. Vivamus auctor arcu nec blandit cursus. Vestibulum hendrerit suscipit tellus at luctus. Duis convallis libero sit amet nulla lobortis aliquam. Nullam sodales facilisis
        massa, sed semper velit semper in. Nulla congue aliquam felis ac fringilla.
      </div>
    </div>
    </body>
</html>

相关问题
最新问题