html - How to make div's height equal to the width -
i have 3 divs display:inline-block
. each div set width 30%, , height 75%. problem width bigger height , want same (1:1). can solve css?
#our_services { height: 350px; text-align: center; font-family:"open_sans_hebrewregular", "alefregular", arial, "times new roman"; color: black; background-color: rgb(224, 224, 224); overflow: auto; margin: auto; } #try { background-color: rgb(224, 224, 224); width:60%; height:70%; margin:auto; } #product1 { width: 30%; height: 75%; position: relative; background-color:green; display:inline-block; /* margin:5px; */ border: 0px; } #product2 { width: 30%; height: 75%; background-color:orange; display:inline-block; /* margin:5px; */ border: 0px; } #product3 { width: 30%; height: 75%; background-color:blue; display:inline-block; /* margin:5px; */ }
<div id="our_services" class="container"> <h1></h1> <div id="try"> <div id="product1"></div> <div id="product2"></div> <div id="product3"></div> </div> </div>
try this.keep same size width , height.
#try{ background-color: rgb(224,224,224); width:60%; height:60%; margin:auto; }
Comments
Post a Comment