CSS 타일 크기 조정

내 타일을 increase.but 내에서 동일한 텍스트로 보이게 만들려고합니다. 단어 property.i에서도 작동 할 수있는 것처럼 보입니다. "연장 보증 구매"및 "목록" 서비스 팩 "기계는 다른 사람과 같이 동일하게 누구든지 도움이 될 수 있습니다 CSS 타일 크기 조정

.tile { 

width: 100%; 
display: inline-block; 
box-sizing: border-box; 
background: #fff; 
padding: 30px; 
margin-bottom: 40px; 
text-align:center;

}

.tile:hover 
{ 
background:#F8F9F9; 
} 



    <div class="tab-pane active" id="warranty"> 
            <div class="col-md-4"> 
             <a class="tile" style="background-color:#EBDEF0;" href="#">Show warranty </a> 

            </div> 
            <div class="col-md-4"> 
             <a class="tile" style="background-color:#EBDEF0;" href="#">New Warranty</a> 

            </div> 
            <div class="col-md-4 "> 
             <a class="tile" style="background-color:#EBDEF0;" href="#">Delete Warranty</a> 

            </div> 
            <div class="col-md-4 "> 
             <a class="tile " style="background-color:#EBDEF0;" href="#">Enter Invoice</a> 

            </div> 
            <div class="col-md-4 "> 
             <a class="tile" style="background-color:#EBDEF0;" href="#">Enter Serial </a> 

            </div> 
            <div class="col-md-4"> 
             <a class="tile" style="background-color:#EBDEF0;" href="#">Buy extended warranty </a> 

            </div> 
            <div class="col-md-4 "> 
             <a class="tile" style="background-color:#EBDEF0;" href="#">List Machines for service pack</a> 

            </div> 
           </div>

출처

2017-02-14 MVC newbie

당신은 모든 div의 높이가 동일되고 싶어하거나 동일한 폭과 마진이 불과합니까? – Ben

너비와 높이가 동일해야합니다. –

당신은 이것에 대한 flex-box을 사용할 수 있습니다.?

CSS :

.tab-pane { 
    display: flex; 
    flex-wrap: wrap; 
} 

.tile { 
    width: 100%; 
    padding: 30px; 
    margin-bottom: 40px; 
    text-align: center; 
    display: block; 
} 

.tile:hover { 
    background: #F8F9F9 !important; 
}

HTML

<div class="tab-pane active" id="warranty"> 
    <div class="col-sm-4"> 
     <a class="tile" style="background-color:#EBDEF0;" href="#">Show warranty </a> 

    </div> 
    <div class="col-sm-4"> 
     <a class="tile" style="background-color:#EBDEF0;" href="#">New Warranty</a> 

    </div> 
    <div class="col-sm-4 "> 
     <a class="tile" style="background-color:#EBDEF0;" href="#">Delete Warranty</a> 

    </div> 
    <div class="col-sm-4 "> 
     <a class="tile " style="background-color:#EBDEF0;" href="#">Enter Invoice</a> 

    </div> 
    <div class="col-sm-4 "> 
     <a class="tile" style="background-color:#EBDEF0;" href="#">Enter Serial </a> 

    </div> 
    <div class="col-sm-4"> 
     <a class="tile" style="background-color:#EBDEF0;" href="#">Buy extended warranty </a> 

    </div> 
    <div class="col-sm-4 "> 
     <a class="tile" style="background-color:#EBDEF0;" href="#">List Machines for service pack</a> 

    </div> 
</div>

나는 그래서 당신은 행동에서 볼 수있는 당신의 col-md-4col-sm-4에게 수업을 수정합니다. HTML에 부트 스트랩 클래스 이름을 사용하고 있기 때문에 부트 스트랩 CDN CSS가 포함되었습니다. 그리고 !important을 추가하여 앵커 태그의 인라인 색상 스타일을 재정의했습니다.

여기에 바이올린 행동에서 볼 수있다 : https://jsfiddle.net/mjqfjbh0/1/

출처

2017-02-14 01:57:47 disinfor

여전히 내 측면에서 캐시와 브라우저를 새로 고칩니다. 표시를 flex로 변경하면 탭 창이 작동하지 않습니다. –

@MVCnewbie 그럼'.col-sm-4'를 다른 래퍼로 감싸서'flex' 속성을 넣어야합니다. 어떤 브라우저를 사용하고 있습니까? 브라우저 접두어를'display : flex'에 추가해야 할 수도 있습니다. – disinfor

크롬을 사용하고 있지만 jsfiddle이 나에게 잘 보입니다. 다른 div를 추가하고 'flex' 클래스를 포함합니다. 그것은 또한 아무것도 바뀌지 않습니다. 나는 당신의 코드를 동일하게 붙여 넣는다. –

CSS 타일 크기 조정

답변

관련 문제