<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" />
< title> </ title>
</ head>
< body>
< div class = " a1" > header</ div>
< div class = " box" >
< div class = " a2" > @yield("content_left")</ div>
< div class = " a3" > @yield("content_text")</ div>
< div class = " a4" > @yield("content_right")</ div>
</ div>
< div class = " a5" > footer</ div>
< style>
body {
border : white 2px solid;
}
.box {
display : flex;
}
.box div {
color : white;
text-align : center;
}
.a1,.a5 {
width : 100%;
height : 40px;
background-color : lightgrey;
color : white;
text-align : center;
line-height : 40px;
margin : 0px auto;
}
.a2 {
order : -1;
flex : 0 0 100px;
margin : 0 auto;
height : 550px;
line-height : 550px;
background-color : lightseagreen;
}
.a3 {
flex-grow : 1;
height : 550px;
line-height : 550px;
background-color : lightsalmon;
}
.a4 {
background-color : lightseagreen;
height : 550px;
line-height : 550px;
flex : 0 0 100px;
}
</ style>
</ body>
</ html>
@extends ( "layout.parent" )
@section ( "title" , "shengbei" )
@section ( "content_left" )
left
@endsection
@section ( "content_text" )
center
@endsection
@section ( "content_right" )
right
@endsection