请问各位大佬，如何不使用flex来实现下列flex的效果？
极客观点
项目管理
HarmonyOS
// css flex
#wrap {
display: flex;
flex-direction: row;
}
.content {
flex: 1;
}
.menu {
flex: 50%;
}
// html
<div id="wrap">
<div class="content">content</div>
<div class="menu">menu</div>
</div>或者换种思路问，网上的两栏布局（两栏布局，一栏固宽，一栏自适应），改成一栏百分比宽度，一栏自适应，如何实现？
===================
我在描述的清楚一些吧，需要实现如下一个布局：
子元素一个定位，一个正常就行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 60%;
height: 400px;
border: 1px solid red;
margin: 100px auto;
padding-left: 300px;
position: relative;
}
.box1{
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 400px;
background: gray;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>利用浮动来布局,以下为代码:
#wrap{
position: relative;
}
.content{
background-color: #ff0000;
width: 100%;
float: left;
}
.menu{
width: 50%;
margin-left: -50%;
float: right;
position: relative;
background-color: #00ffff;
}
点击此处查看示例。
<div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<style>
div {
height: 100px;
outline: 1px solid red;
transform: scale(-1);
position: relative;
}
.left {
float: left;
width: 50%;
}
.right {
overflow: hidden;
}
</style>因为并没有提到具体的兼容要求，所以这里使用了 E + F 的相邻选择符方式来“判断”是否有侧边栏，如果没有侧边栏，那么就把内容一栏的 padding 给干掉。
<div class="box">
<div class="side"></div>
<div class="main">
<div class="main_box"></div>
</div>
</div>.main {
float:left;
width: 100%;
height: 300px;
background-color: #d8d8d8;
box-sizing: border-box;
}
.side {
float: right;
width: 50%;
height: 320px;
margin-left: -50%;
background-color: #dd320f;
opacity: .5;
}
.side + .main {
padding-right: 50%;
}
/* 为了看里面的内容是怎么样的，加一个模块 */
.main_box {
width: 98%;
height: 100px;
background-color: #33ff33;
}大概的效果就是这样：
2 回答899 阅读✓ 已解决
3 回答750 阅读✓ 已解决
4 回答1.2k 阅读✓ 已解决
2 回答1.5k 阅读✓ 已解决
2 回答1.3k 阅读✓ 已解决
2 回答867 阅读✓ 已解决
2 回答1.1k 阅读✓ 已解决
content{
Flex:1 1 auto
}
menu{
flex:0 0 50%
}