Question

我有一个问题。我有以下任务：

我的代码是：

 <div style="border: 2px solid #ddd; padding: 20px;width: 100%;margin-top:0px;table-layout: fixed;border-spacing: 10px;">
    <div style="display: table-cell;">
        Text
    </div>
    <div style="display: table-cell;">
        <hr>
    </div>
    <div style="display: table-cell;">
        <button></button>
    </div>
</div>

但我没有得到好结果。你能帮我吗？ Thx提前。

Answer 1

嗨，你不能使用3 div，但它的工作使用2 div这样

 <div class="main-div">
<div class="border-hr">
    Text
</div>

<div >
    <button>test</button>
</div>

式

＆＃13;

.main-div{
   border: 2px solid #ddd; padding: 20px;width: 100%;margin-top:0px;table-layout: fixed;border-spacing: 10px;
    display:table;
    position:relative;
}
.main-div div{
   width:50%;
    display: table-cell
}

.border-hr:after{
  border: 2px solid #dddddd;
    bottom: 0;
    content: "";
    height: 110%;
    left: 37%;
    position: absolute;
    top: -6px;
    transform: rotate(30deg);
    
}

＆＃13;

 <div class="main-div">
    <div class="border-hr">
        Text
    </div>
   
    <div >
        <button>test</button>
    </div>
</div>

＆＃13;

Answer 2

您可以查看以下代码。

Fiddle

.hr {
width:2px;
height:142px;
margin-top: -55px;
background-color:#000000;
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-o-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);

}

Answer 3

在这里，我们尝试使用canvas模拟您的问题：

<!DOCTYPE html>
<html>

<head>
<title>WisdmLabs</title>
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:2px solid black;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(110,0);
ctx.lineTo(90,100);
ctx.stroke();

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.font = "10px Georgia";
ctx.fillText("place for text", 10, 50);
ctx.fillText("This is a button", 110, 50);

</script>

</body>
</html>

如果您想要对此进行任何修改或改进，请告诉我们......

创建一个包含3个div的div

3 个答案: