<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ignite UI for jQuery Layout Manager - Fluid 12 column layout based on CSS only - init from markup</title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- Modernizr/jQuery/jQuery UI -->
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<style type="text/css">
body {
font-family: "Segoe UI",Helvetica,Tahoma,Arial,Verdana,sans-serif;
background-color: #fff;
}
.col3 {
background-color: #EEE;
color: #555;
padding: 0 20px 20px 20px;
margin: 0 0 20px 0;
}
#layout .col12 {
border:2px dashed #999;
margin: 0 0 20px 0;
}
#layout .col7 {
background-color: #FFA72D;
color: #FFF;
padding: 0 20px 20px 20px;
margin: 0 0 20px 0;
}
#layout .col4 {
background-color: #ffaf41;
color: #fff;
padding: 0 20px 20px 20px;
}
#layout .col2 {
background-color: rgb(0, 155,225);
color: #FFF;
padding: 0 20px 20px 20px;
}
#layout .col5 {
background-color: #00CCFF;
padding: 0 20px 20px 20px;
color: #FFF;
}
@media screen and (min-width: 768px) {
#sampleContainer {
margin-left: 0;
}
}
.ig-layout-col {
padding-left: 0;
}
</style>
<div id="layout" class="ig-layout-col">
<div class="row">
<div class="col3">
<h3>見出し</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
</p>
</div>
<div class="col3">
<h3>見出し</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
</p>
</div>
<div class="col3">
<h3>見出し</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
</p>
</div>
<div class="col3">
<h3>見出し</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
</p>
</div>
</div>
<div class="row">
<div class="col12">
<div class="col7">
<h3>この段落は 7 列に及びます </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor. Sed vestibulum porta risus, condimentum consequat ligula egestas a. Proin suscipit bibendum interdum. Vestibulum non velit sem, quis porttitor magna. Morbi placerat suscipit nunc. Aenean ut blandit purus. Nulla interdum quam eu nunc tempor dapibus.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col2">
<h3>この段落は 2 列に及びます </h3>
<p>この段落は 2 列に及びます 。上の段落が 12 列のコンテナー (ピンク境界線) でラップされたため、次の行にラップします。 </p>
</div>
<div class="col5">
<h3>この段落は 5 列に及びます </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor. Sed vestibulum porta risus, condimentum consequat ligula egestas a. Proin suscipit bibendum interdum. Vestibulum non velit sem, quis porttitor magna. Morbi placerat suscipit nunc. Aenean ut blandit purus. Nulla interdum quam eu nunc tempor dapibus.</p>
</div>
</div>
</div>
</body>
</html>
