この記事では、参照用の列情報を作成します。特定のコンテンツは次のとおりです
Google Chrome解析の注文はロードして実行する必要があります
$(window).load(function(){$( '。text')。eq(0).css( 'margin -top'、($( '。auto')。eq(0).height() - $( '。テキスト')。注:Firefoxブラウザの場合、Ctrl+Shift+Mを押してモバイル端子サイズを調整できます。
サブカラムタイトルの質問
<div> <div> <hgroup> <h1>情報</h1> <h4>企業内部トレーニングの最新ニュース、リソースなど... </h4> </hgroup> </div> </div>
列css
.Jumbotron {マージン:50px 0 0 0;パディング:60px 0;背景:#ccc url(../ img/bg.jpg);色:#ccc;}。jumbotron h1 {font-size:26px; // 768,30; 992,33; 1200,36;パディング:0 0 0 20px;}。JumbotronH4{font-size:16px; // 768,16; 992,17; 1200,18パディング:0 0 20px;}情報コンテンツ
<div id = "Information"> <div> <div> <div> <div> <div> <div> <div> <img src = "img/info1.jpg"> </div> <div> <h4>ラジオ、映画、テレビの国家管理がTVOS2.0をリリースし、Huawei Alibabaは研究と開発に基づいて研究された<P> TVOS1.0、Huawei Mediaos、Alibaba Yunosの統合。 Huaweiは主に開発作業を担当しており、Alibabaはビルトインテレビショッピングモールを担当しています。 </p> <p> admin 15/10/11 </p> </div> </div> </div> </div> </div> <div> <blockquote> <h2>人気ニュース</h2> </blockquote> <div> <div> <div> <div> <div> <div> div style = "magris </div> <div style = "padding-right:0"> <h4> title </h4> <p> admin 15/10/11 </p> </div> </div> </div> </div> </div> </div> </div> </div> </div>
情報コンテンツCSS
#information {パディング:40px 0;背景:#eee;}。info-right {background-color:#ffff; Box-Shadow:2px 2px 3px #ccc;}。Info-right blockquote {padding:0;マージン:0;}。info-right h2 {font-size:20px;パディング:5px;}。info-right h4 {line-height:1.6;}。info-content {background-color:#ffff; Box-Shadow:2px 2px 3px #ccc;マージン:0 0 20px 0;}。Info-Content IMG {マージン:12px 0;}。info-content H4 {font-size:14px; // 768,16; 992,18; 1200,20;パディング:2px 0 0;}。情報コンテンツp {line-height:1.6;色:#666;}.info-Content H4の場合、中型および大画面には1つのラインが必要です。
.info-Content H4 {Overflow:hidden;ホワイトスペース:nowrap;テキストオーバーフロー:ellipsis;}それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記は、ブートストラップ制作サブカラムの情報コンテンツを閉じたいコードです。みんなが気に入ってくれることを願っています。