我才刚刚开始学习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>
最佳答案
您可以通过在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>关于html - 更改CSS元素的位置(装饰花括号从左到右)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54488417/