html, body { height:100%; }
body {
margin:0px;
width:100%;
background-color: #BCCC48;
font-family:Calibri;
}
header {
height: auto;
/*background: -webkit-linear-gradient (#89A530, #AEC141);
\t background: -moz-linear-gradient (#89A530, #AEC141);
\t background: linear-gradient (#89A530, #AEC141);*/
overflow:hidden;
padding:30px;
}
header .leftPart
{
display:inline-block;
float:left;
font-weight:500;
font-family:Calibri;
}
.rPR1, .rPR2, .rPR3
{
border:1px solid rgba(255,255,255,0.5);
display:block;
width:60px;
font-size:14px;
}
.rPR2
{
color:White;
font-size:350%;
}
header .rightPart
{
display:table;
float:right;
width:auto;
}
header h1 {
display:table-cell;
vertical-align:middle;
font-family: Arial, san-serif;
color: white;
font-size: 480%;
padding-right: 3%;
padding-top: 0px;
letter-spacing: -2px;
border:1px solid rgba(255,255,255,0.5);
}
header .headerBlock2
{
text-align:right;
display:table-cell;
width:100px;
font-size:12px;
line-height:23px;
text-transform: uppercase;
border:1px solid rgba(255,255,255,.5);
vertical-align:middle;
font-weight:100;
font-family:Arial;
}
div.container {
display:table-row;
border-top-left-radius: 50% 50px;
border-top-right-radius: 50% 30px;
height: auto; /* Changed */
background-color: white;
width: 100%;
overflow:hidden;
table-layout:fixed;
}
div .left-column
{
display:table-cell;
width:25%;
height:100%;
padding:80px 20px;
background:#333;
color:#ddd;
/*float:left;*/
text-align:justify;
}
.left-column h2, .left-column h3
{
color:#ff9933;
}
div .right-column
{
display:table-cell;
/*width:calc(75% - 42px); /* This -40px is because of 20px padding of .left-column on both left and right*/
height:auto;
background:#fff;
border:0px solid red;
}
.row1
{
display:table;
width:100%;
height:100%;
color:#fff;
overflow:auto;
table-layout:fixed;
background:#333;
}
.row1 img.row1col1
{
display:table-cell;
width:100%;
}
.row1 .row1col2
{
display: table-cell;
position:relative;
padding: 10px;
vertical-align: middle;
text-align:right;
}
.row1 .row1col2 p
{
margin:9px auto;
}
.bullets
{
padding-left:5px;
color:#ff9933;
}
.row2
{
display:block;
width:100%;
}
.row2 h1
{
text-align:center;
width:100%;
color:#89A530;
}
.content
{
display:block;
width:calc(100% - 40px);
overflow:auto;
text-align:justify;
padding:10px 20px;
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
footer
{
display:block;
width:calc(100% - 40px);
height:auto;
padding:20px 20px 0px 20px;
background:#eee;
}
footer pre
{
padding:0px;
margin:0px;
font-weight:bold;
/*font-family:calibri;*/
}
@media only screen and (max-width: 650px) {
header
{
padding:20px 15px;
}
.rPR1, .rPR2, .rPR3
{
width:50px;
font-size:12px;
}
.rPR2
{
font-size:220%;
}
header h1
{
font-size: 300%;
}
.headerBlock2
{
width:80px;
font-size:12px;
line-height:18px;
}
}
@media only screen and (max-width: 480px) {
header
{
padding: 15px 10px;
}
.rPR1, .rPR2, .rPR3
{
width:40px;
font-size:0.7em;
}
.rPR2
{
font-size:190%;
}
header h1
{
font-size: 210%;
}
.headerBlock2
{
font-size:0.6em;
line-height:12px;
width:75px;
}
}
<body>
<!-- HEADER -->
<header>
<span class="leftPart">
<span class="rPR1">ISSUE</span>
<span class="rPR2">00</span>
<span class="rPR3">MONTH YEAR</span>
</span>
<span class="rightPart">
<span class="headerBlock2">
Monthly Journal of Information Technology
</span>
<h1>Tech<span style="font-weight:normal">Times</span></h1>
</span>
</header>
<!-- CONTAINER -->
<div class="container">
<span class="left-column">
<h2>
Solutions For a New Economy
</h2>
<p>
<strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</p>
<h3>
PERSONAL COMPUTING
</h3>
<p>
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from?Contrary to popular belief, Lorem Ipsum is not simply random text.
</p>
</span><!-- LEFT COLUMN Ends -->
<span class="right-column">
<span class="row1">
<img class="row1col1" src="http://www.divyashah.in/stackoverflow/images/image-1.jpg" />
<span class="row1col2">
<h2>this issue</h2>
<p>Open Source Revolution <span class="bullets">P.1</span></p>
<p>I.T.Management Tips <span class="bullets">P.2</span></p>
<p>Non-Profit Solutions <span class="bullets">P.3</span></p>
<p>Trends & New Software <span class="bullets">P.4</span></p>
</span><!-- ROW1COL2 Ends -->
</span> <!-- ROW 1 Ends -->
<span class="row2">
<h1>Exploring Open Source Software Opportunities</h1>
<span class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet mollis lorem, in consequat leo finibus at. Etiam et suscipit dui, eu luctus velit. Curabitur dapibus euismod semper. Donec et quam euismod nisl feugiat commodo. Praesent in egestas purus, eget finibus lectus. Duis eget erat at eros maximus fringilla quis non neque. Fusce et convallis purus. Mauris sed pellentesque leo. Suspendisse potenti. Integer bibendum, diam et pellentesque mattis, nunc tortor dictum mi, a suscipit dolor ante nec arcu. Aliquam aliquet placerat ex, eu tincidunt est feugiat id. Fusce in dui finibus, sodales quam porta, egestas justo. Praesent convallis est et tortor vehicula, sed porttitor metus sollicitudin.
</p>
<p>
Curabitur quis neque in risus ullamcorper luctus. Duis finibus mauris in eros rhoncus suscipit. Maecenas non faucibus dolor. Cras dictum eu enim a aliquet. Mauris tincidunt scelerisque finibus. Praesent interdum ipsum quis hendrerit ornare. Mauris arcu metus, dignissim sed convallis at, placerat eget nulla. Sed nec facilisis enim. Phasellus at gravida est. Aliquam faucibus ipsum scelerisque, tincidunt massa aliquam, rutrum turpis. Maecenas ut ex quis arcu dignissim pulvinar non in lectus. Suspendisse viverra tristique laoreet. Donec mollis, lectus a scelerisque eleifend, libero erat fermentum sapien, a condimentum lorem nunc eu risus. In interdum libero mauris, ut ultrices mi hendrerit vitae. Donec accumsan, nisi vel consectetur aliquet, elit nunc blandit lorem, sed viverra odio ligula in nibh. Phasellus posuere nulla id accumsan blandit.
</p>
<p>
Aliquam nec tristique felis. Nulla quam turpis, maximus vitae felis a, consectetur pretium nisi. Nam eu pharetra leo. Quisque ac est id nisi commodo mattis et quis libero. Morbi pretium sem at mi iaculis, eget aliquam magna facilisis. Suspendisse id vehicula dui. Sed ornare augue in augue rutrum scelerisque. Praesent ac lectus luctus, placerat enim nec, accumsan quam. Vivamus condimentum sodales nulla consequat lobortis. Mauris condimentum bibendum lorem, fringilla condimentum mauris tempor quis. Etiam feugiat eros eu ante consectetur, quis interdum nisl condimentum. Duis interdum velit eu lorem faucibus ornare. Nam convallis tellus vitae scelerisque pellentesque. Donec tempor dapibus urna eget convallis. Aliquam at imperdiet massa. Integer in eros ante. Praesent id lacinia leo. Donec fermentum, justo vitae luctus aliquet, nisl augue scelerisque felis, in commodo mi lacus quis mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce at purus risus. Donec rhoncus diam nibh. Nulla dignissim, tortor id mattis laoreet, nulla leo vehicula nulla, at aliquet nunc augue eu ligula. Fusce id est est. Fusce ut ultricies velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam vel enim ac massa elementum pharetra id vitae leo. Quisque felis magna, accumsan a accumsan et, tincidunt eget ante. Quisque lacinia eleifend nisi, sed porta arcu volutpat at. Duis vitae malesuada lectus.
</p>
<p>
Sed a rhoncus nulla, et vulputate nisl. Fusce a augue non massa gravida commodo ut sed neque. Phasellus tempor, neque ac lacinia blandit, nisi tellus consectetur augue, molestie efficitur mauris purus ac elit. Morbi a urna tempor, ornare augue nec, sagittis dui. Praesent sit amet magna congue, porta lacus ac, lacinia velit. Cras gravida dapibus tortor ut egestas. Nulla eu leo augue. Aliquam sodales est leo, ac gravida mauris cursus non. Cras semper massa at est dictum, et mollis metus egestas. Vivamus ut ultrices erat. Duis vel tempor ante, nec fringilla purus. Suspendisse eu aliquet mauris, et dictum urna. Aenean tincidunt, nulla ut finibus pretium, quam odio ullamcorper enim, et gravida enim augue vitae augue. Nam et ligula commodo, malesuada sem quis, accumsan tellus. Donec nec lectus at nisl dapibus viverra.
</p>
<p>
Aliquam at imperdiet massa. Integer in eros ante. Praesent id lacinia leo. Donec fermentum, justo vitae luctus aliquet, nisl augue scelerisque felis, in commodo mi lacus quis mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce at purus risus. Donec rhoncus diam nibh. Nulla dignissim, tortor id mattis laoreet, nulla leo vehicula nulla, at aliquet nunc augue eu ligula. Fusce id est est. Fusce ut ultricies velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam vel enim ac massa elementum pharetra id vitae leo. Quisque felis magna, accumsan a accumsan et, tincidunt eget ante. Quisque lacinia eleifend nisi, sed porta arcu volutpat at. Duis vitae malesuada lectus.
</p>
</span><!-- CONTENT Ends -->
</span><!-- ROW 2 Ends -->
</span> <!-- RIGHT COLUMN Ends -->
</div><!-- CONTAINER Ends -->
<!-- FOOTER -->
<footer>
<div class="footer-left">
<img src="http://www.divyashah.in/stackoverflow/images/Logo.jpg" />
<div class="address">
<pre>
New Jersey
12 North State, Route 17
Suite 303,Paramus
New Jersey,NJ-07652
Tel: +1.201.336 9431/ 32
</pre>
</div>
</div>
</footer>
</body>
你想要这个> http://jsfiddle.net/divy3993/vdsLtxbw/2/ – divy3993
这是媒体查询：http://jsfiddle.net/divy3993/vdsLtxbw/3/ – divy3993
嗨。谢谢。那些看起来不错，但我想知道的是，如果我可以将标题栏放在标题下面，就像在宣传册中一样，可以与弯曲部分齐平。例如，左边有一个黑色的列，并且与绿色标题之间没有空白。每列在顶部将有不同的曲率。这可能与CSS有关吗？我只是学会了如何使用多个容器并移动它们来平衡色谱柱的长度 - 但是当你没有从干净的石板和90度的角度开始时，可以在这里使用类似的东西吗？ – zannster