콘텐츠에 대해서만 div 너비를 만드는 방법

debugcn 에 게시 Dev

사용자 2208349

이 HTML이 있습니다.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Float</title>
    <link rel="stylesheet" href="Styles/style.css" />
</head>
<body>
    <div class="header">
    </div>
    <div class="mainContent">
        <div class="slideBar"></div>
        <div class="content">
            up
            <div class="div1">
                Hello
            </div>
            down
        </div>
    </div>
    <div class="footer"></div>
</body>
</html>

그리고 이것은 내 CSS 스타일입니다.

html, body {
margin:0px;
height:100%;
}
.header {
    width:100%;
    height:20%;
    background-color:red;
    border-radius:10px;
}
.footer {
    width:100%;
    height:20%;
    background-color:green;
}
.mainContent {
    width:100%;
    height:60%;
}
.slideBar {
    width:20%;
    height:100%;
    float:left;
    background-color:blue;
}
.content {
    width:80%;
    height:100%;
    float:right;
    background-color:yellow;
}
    .content .div1 {
        border:2px solid black;
        margin-left:10px;
    }

결과는 다음과 같습니다. 여기에 이미지 설명 입력

내 문제

hello단어 의 테두리 가 모든 너비로 이동합니다. 하지만 텍스트를 둘러싸 기 위해 필요합니다.

로즈 쿤켈

<div>는 블록 수준 요소이므로 콘텐츠를 축소하려면 인라인 요소처럼 작동해야합니다. display: inline-block;on으로 설정 .content .div1하면 인라인 요소처럼 작동하므로 내용에 맞을 것입니다. 여기에서 예를 참조하십시오 : http://jsfiddle.net/6wZhe/

그러나 원하는 것은 블록 수준 요소가 아닌 인라인 요소 인 것을 제외하고는 다른 다목적 비의 미적 컨테이너 인 <div>태그에 대한 태그를 변경하는 <span>것입니다.

계속해서 줄 바꿈을 원한다면 요소를 <div>추가 <br />하거나 부동 소수점으로 할 수 있습니다 .

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-05-31

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사