如何在CSS

Question

我最近在编码以了解有关html和CSS的更多信息。我现在没有使用任何javascript。

现在，我遇到了问题，因为我正在关注psd文件，我需要将它变成一个html。我需要制作一个灰色的盒子，在那个盒子下面，正好在下面的中间，我需要一个副标题和一个段落，＆lt; p为H. ＆LT; h4＆gt;。见下图。

＆＃13;

＆＃13;

.boxes{ 
  width: 500px; 
       background-color: #e6e6e6; 
    display: block;
    height: 130px;
    width: 230px;
    color: white;
    text-align: center;
    padding: .10em; 
    margin: 2em;
    border: double #fff 20px; 
    border-bottom: none; 
} 

.non-icons { 
    margin: 15%;   
}

.box_text{ 
 color: #8c8b8b;

} 

＆＃13;

<div class="container"> 
    <div class="four columns">
        <div class="boxes"> 
            <i class="fa fa-desktop fa-4x non-icons"></i> 
        </div>
     <h4 class="box_text"> Web Design</h4>
    </div>
    <div class="four columns">
        <div class="boxes"> 
            <i class="fa fa-shopping-basket fa-4x non-icons"></i>
        </div>
    </div>
    <div class="four columns">
        <div class="boxes"> 
            <i class="fa fa-signal fa-4x non-icons"></i>
        </div>
    </div>   
</div> <!-- End of Container --> 

＆＃13;

＆＃13;

＆＃13;

这在普通视图中看起来很好，但在屏幕变窄时会中断。

请帮助..

谢谢， Devansh

Answer 1

您要设计的内容称为grid。制作为不同屏幕尺寸自动调整大小的网格是Bootstrap的发明。

这个w3schools示例将帮助您（添加定价容器示例）：

http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp#myCarousel2

另外，请阅读此部分，了解网格系统的工作原理。

http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Answer 2

网格适用于使布局响应。或者尝试将您的值设置为百分比（％），而不是像素或ems这样的确定单位。这将使您的布局更加流畅。

Bootstraps网格系统很好。

Flexbox也是一个不错的选择。 http://www.w3schools.com/css/css3_flexbox.asp

self.navigationItem.titleView = _searchController.searchBar; 还有2 width个属性，这让人感到困惑。

Answer 3

如果你对自助训练没有好处，那么你可以做到这一点很糟糕。在某种程度上：

div{
    width:30%;
    overflow:hidden;
    height:250px;
    display:inline-block;
}

然后你将元素放在div中，它就会排成一行。粗糙你可以改变宽度和高度。确保图像的大小/缩放尺寸相同，并且具有相同的填充/边距，以使其看起来美观和均匀。

另外，你应该考虑阅读一篇关于PSD转换为HTML的文章。