2 блока с одинаковым весом
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#slider{
height: 500px;
width: 700px;
border: 1px solid rgb(0, 0, 255);
position: relative;
color: rgb(255, 255, 255);
text-align: center;
}
#slider div{
box-sizing: border-box;
border: 1px solid rgb(255, 255, 0)
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
});
</script>
</head>
<body>
<body>
<div id="slider"><div style="left: 0px; top: 0px; position: absolute; width: 350px; height: 500px; line-height: 500px; background-color: rgb(57, 102, 227);">5</div><div style="left: 350px; top: 0px; position: absolute; width: 350px; height: 500px; line-height: 500px; background-color: rgb(57, 102, 227);">5</div></div>
<p>5,5</p>
</body>
</body>
</html>
2 блока с разным весом
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#slider{
height: 500px;
width: 700px;
border: 1px solid rgb(0, 0, 255);
position: relative;
color: rgb(255, 255, 255);
text-align: center;
}
#slider div{
box-sizing: border-box;
border: 1px solid rgb(255, 255, 0)
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
});
</script>
</head>
<body>
<body>
<div id="slider"><div style="left: 0px; top: 0px; position: absolute; width: 490px; height: 500px; line-height: 500px; background-color: rgb(249, 71, 164);">7</div><div style="left: 490px; top: 0px; position: absolute; width: 210px; height: 500px; line-height: 500px; background-color: rgb(157, 160, 196);">3</div></div>
<p>3,7</p>
</body>
</body>
</html>
3 блока с одинаковым весом
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#slider{
height: 500px;
width: 700px;
border: 1px solid rgb(0, 0, 255);
position: relative;
color: rgb(255, 255, 255);
text-align: center;
}
#slider div{
box-sizing: border-box;
border: 1px solid rgb(255, 255, 0)
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
});
</script>
</head>
<body>
<body>
<div id="slider"><div style="left: 0px; top: 0px; position: absolute; width: 233.333px; height: 500px; line-height: 500px; background-color: rgb(81, 21, 8);">15</div><div style="left: 233.333px; top: 0px; position: absolute; width: 466.667px; height: 250px; line-height: 250px; background-color: rgb(81, 21, 8);">15</div><div style="left: 233.333px; top: 250px; position: absolute; width: 466.667px; height: 250px; line-height: 250px; background-color: rgb(81, 21, 8);">15</div></div>
<p>15,15,15</p>
</body>
</body>
</html>
3 блока с разным весом
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#slider{
height: 500px;
width: 700px;
border: 1px solid rgb(0, 0, 255);
position: relative;
color: rgb(255, 255, 255);
text-align: center;
}
#slider div{
box-sizing: border-box;
border: 1px solid rgb(255, 255, 0)
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
});
</script>
</head>
<body>
<body>
<div id="slider"><div style="left: 0px; top: 0px; position: absolute; width: 370.588px; height: 500px; line-height: 500px; background-color: rgb(215, 53, 192);">9</div><div style="left: 370.588px; top: 0px; position: absolute; width: 329.412px; height: 62.5px; line-height: 62.5px; background-color: rgb(9, 51, 201);">1</div><div style="left: 370.588px; top: 62.5px; position: absolute; width: 329.412px; height: 437.5px; line-height: 437.5px; background-color: rgb(205, 33, 238);">7</div></div>
<p>7,1,9</p>
</body>
</body>
</html>