css笔记inline-block以及空白字符处理 - 青草圆-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

css笔记inline-block以及空白字符处理 - 青草圆

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 21, 2016 am 08:42 AM

html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>无标题</title>
	<link rel="stylesheet" type="text/css" href="css/whiteSpace.css">
</head>
<body>
	<div class="container">
		<div class="left">
			
			<span>
				
				2223333333333333333333333333333333333333333333333333333333333333333333333333333333333
			</span>

		</div>
		<div class="right">
			<span>222222222222222222222222222222222</span>
		</div>
	</div>

	<div style="clear:both"></div>
	<div class="main">
		<div class="myLft">
			
			123
		</div>
		<div class="myRgt">
			
			456
		</div>
	</div>
</body>
</html>

ログイン後にコピー

css

/*
*空白字符
*/
body{
	margin:0;
	padding:0;
}

/*行内元素*/
.right , 
.left{
	margin:0;
	padding:0;
	display: inline-block;
	width:50%;
	height: 100px;
	word-break:break-all;
	word-wrap:break-word;
	white-space:normal;
	line-height:0;
	font-size:15px;
	vertical-align:text-top;
	
}

.left{
	background-color: #428bca;
}

.left span ,.right span{
	line-height:1.28;
}

.right{
	background-color:#F00;
}

.container{
	width:100%;
	/*white-space: nowrap;*/
	font-size:0;
}

/*.left span{
	white-space:pre-line;
}*/

/*浮动元素*/
.main{
	width:100%;
	margin:100px 0;
	padding:0;
	height:100px;
}

.myLft,.myRgt{
	float:left;
	width:50%;
	height:100px;
}

.myLft{
	background-color:#428bca;
}

.myRgt{
	background-color:#f00;
}

.main:before,.main:after{
	display:table;
	height:0;
	content:'';
	clear:both;
}

ログイン後にコピー

效果图

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7367

Java チュートリアル

1628

CakePHP チュートリアル

1354

Laravel チュートリアル

1266

PHP チュートリアル

1214

Related knowledge

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

WebページのPNG画像にストローク効果を効率的に追加する方法は？ Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？ Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

＆lt; datalist＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

＆lt; Progress＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？ Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

＆lt; meter＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

＆lt; iframe＆gt;の目的は何ですかタグ？使用する際のセキュリティ上の考慮事項は何ですか？ Mar 20, 2025 pm 06:05 PM

この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

See all articles

css笔记inline-block以及空白字符处理 - 青草圆

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック