내부에 있습니다. 나는이 모양이 필요합니다 여기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example - 1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1> Our Menu </h1>
<div class="col-lg-4 col-md-6"> <section class="a"> A title</section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div>
<div class="col-lg-4 col-md-6"> <section class="b"> B Title </section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
<div class="col-lg-4 col-md-12"> <section class="c"> C Title </section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div>
</body>
</html>
내 CSS 파일입니다 : 여기
내 HMTL 코드입니다
*{
font-family: Comic Sans MS, cursive, sans-serif;
box-sizing: border-box;
}
h1 {
text-align: center;
}
div{
background-color: gray;
float: left;
}
p{
padding: 5px;
float: left;
}
section{
width: 110px;
border: solid 1px black;
text-align: center;
font-weight: bold;
float: right;
}
.a{
background-color:#D59898;
}
.b{
background-color:#C14543;
color: white;
}
.c{
background-color:#E5D198;
}
@media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
border: 2px solid black;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
/********** Tablet devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
border: 2px solid black;
}
.col-md-1 {
width: 8.33%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-9 {
width: 74.99%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}
코드는 –
이 아마도 당신이 전환해야 공유 이 격자보다 더 유연하고 flexboxes를 시도해보십시오. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – sjahan
패딩을 적용 해보십시오. – Sagar