How to use a right margin on a -ms-grid

2012年8月1日下午 08:31

Take this sample:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link href="//Microsoft.WinJS.1.0.RC/css/ui-light.css" rel="stylesheet" />
	<style>
		section {
			border: 1px solid blue;
			overflow-x: scroll;
		}

		div {
			display: inline-block;
		}

		div:first-child {
			margin-left: 120px;
			width: 800px;
			height: 200px;
			background-color: #ff0000;
		}

		div:last-child {
			margin-right: 120px; /* In DOM Explorer, the margin seems to be applyied for the -ms-grid version, but the scrolling doesn't seems to react well... */
			width: 800px;
			height: 200px;
			background-color: #00ff21;
		}
	</style>
</head>
<body role="application">
	<section style="display: -ms-grid; -ms-grid-columns: auto auto;">
		<div style="-ms-grid-column: 1;"></div>
		<div style="-ms-grid-column: 2;">I Want a margin on my right...</div>
	</section>

	<section style="white-space: nowrap;">
		<div></div>
		<div></div>
	</section>
</body>
</html>

On the -ms-grid version, I just can't make the right margin works on the last child. I want to use this pattern to have margin on both sides of the the main hub, but the scroll bar should be entire window width.

Using the no-wrap technique, I can make it works, but it stop workings as soon as I add a content into the div.

Is it a bug, or is there any better way to have a full width scroll bar, but with margin working?

所有回覆

2012年8月2日下午 02:10

版主

How about adding a dummy div:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		section {
			border: 1px solid blue;
			overflow-x: scroll;
		}
		div {
			display: inline-block;
		}
		div:first-child {
			margin-left: 120px;
			width: 800px;
			height: 200px;
			background-color: #ff0000;
		}
		div:nth-last-child(2) {
			margin-right: 120px;
			width: 800px;
			height: 200px;
			background-color: #00ff21;
		}
	</style>
</head>
<body role="application">
	<section style="display: -ms-grid; -ms-grid-columns: auto">
		<div style="-ms-grid-column: 1;"></div>
		<div style="-ms-grid-column: 2;">I Want a margin on my right...</div>
		<div style="-ms-grid-column: 3;"></div>
	</section>
	<section style="white-space: nowrap;">
		<div></div>
		<div></div>
	</section>
</body>

-Jeff

Jeff Sanders (MSFT)

已提議為解答 Jeff SandersMicrosoft Employee, Moderator 2012年8月2日下午 02:10
已標示為解答 Dino HeModerator 2012年9月14日上午 09:57

2012年9月17日下午 01:33

0

Sorry for the delay, I was on summer vacations. Well for the dummy div, it's a solution, but I don't really like it for the simple reason html is better used to described the structured content and the css should on how to display it. So a css based solution would be prefered.
- 回覆
- 引述