Question

所以我正在使用bootstrap并尝试创建一个场景，其中一半是橙色，另一半是绿色，但直接在中间我想要蓝色六边形。我遇到的问题是我可以让蓝色六边形坐在桌面中央，但我想设计它适合移动设备。任何想法如何让六边形直接坐在中间是两个div在移动友好时相遇并留在那里？

这是我的HTML

[
    {
        "number": "value"
    }
]

这是我的相关CSS

let fs = require('fs');
fs.readFile('./file.json', (err, file) => {
  let jsonArray = JSON.parse(file);

  jsonArray.push({
    number2 : "newValue"
  });

  fs.writeFile('file.json', JSON.stringify(jsonArray));
});

Answer 1

如果您已使用橙色/绿色创建行，请将六边形元素放入该行，将position: relative;添加到行（父级），将六边形元素设置为position: absolute;并使用left: 50%; transform: translateX(-50%);的组合以使其居中。

＆＃13;

body{


font-family: 'Arima Madurai', cursive;
}
.row {
  position: relative;
}
.hexagon {
  position: relative;
  width: 200px; 
  height: 115.47px;
  background-color: #64C7CC;
  display:block;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 57.74px solid #64C7CC;
}

.hexagon:after {
  top: 100%;
  margin-left:-83%;
  width: 0;
  border-top: 57.74px solid #64C7CC;
}

.red-500{
    background:#FF4500;
    height:250px;
    z-index:0;
    display:block;
}

.green-500{
    background:#4CA64C;
    height:250px;
    z-index:-5;

}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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">
 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 <title>Hexagon | Home</title>

 <!-- Bootstrap -->
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <link href="css/style.css" rel="stylesheet" />
 <link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
 </head>

 <body>
    <header>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6  red-500">
                </div>
                                      <div class="hexagon">
                            <i class="fa fa-handshake-o logo" aria-hidden="true" style="font-size:7em;"></i>
                        </div>
                <div class="col-md-6 green-500">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-6 hex-cont">

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 white">
                    <h1 class="text-center wit">Friend Zone</h1>
                    <h3 class="text-center wit">Mediation Service</h3>
                </div>
            </div>

        </div>
    </header>

＆＃13;

我遇到了div放置的问题

1 个答案: