Html 带过渡和div的两列布局？_Html_Css_Two Column Layout

Html 带过渡和div的两列布局？

html css

Html 带过渡和div的两列布局？,html,css,two-column-layout,Html,Css,Two Column Layout,我试着在段落旁边放一个过渡div，但由于某种原因它不起作用？我不太擅长html，有人能帮我吗 .left { float: left; clear: both; width: 200px; overflow: hidden; margin-right: 0px; padding-right: 0; text-decoration: none; display: table-column; } .right { width: 50%; float: right; overflow: h

我试着在段落旁边放一个过渡div，但由于某种原因它不起作用？我不太擅长html，有人能帮我吗

.left {
float: left;
clear: both;
width: 200px;
    overflow: hidden;
margin-right: 0px;
padding-right: 0;
text-decoration: none;
display: table-column;
}

.right {
width: 50%;
float: right;
overflow: hidden;
text-align: right;
display: table-column;
}

.left, .right {
display: table-column;
}


</style>
</head>
<body>

<div id="conta">
<div class="left" id="top"><a href="new.png">home<a></div>
<div class="left"><a>about</a></div>
<div class="left"><a>projects</a></div>
<div class="left"><a>blog</a></div>
<div class="left"><a>contact</a></div>

<p class="right"><a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper interdum facilisis. Quisque imperdiet purus ac tellus ultrices ultricies. Sed massa arcu, sagittis quis tellus laoreet, dapibus dictum neque. Nam fermentum enim ligula, quis vulputate arcu molestie et. Sed libero turpis, ultricies id pulvinar non, suscipit ut turpis. Ut nec nisl a odio laoreet commodo ac vitae orci. In eget sem luctus, pellentesque tellus eu, cursus nisl. Duis fringilla tellus quam, sit amet mollis lacus volutpat vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ultrices nibh id lacus molestie porttitor. Proin quis euismod lectus. Vestibulum a elit mollis, maximus diam ac, consequat ante.</a></p>

</div>
<div class="clear"></div>

。左{
浮动：左；
明确：两者皆有；
宽度：200px；
溢出：隐藏；
右边距：0px；
右边填充：0；
文字装饰：无；
显示：表格列；
}
.对{
宽度：50%；
浮动：对；
溢出：隐藏；
文本对齐：右对齐；
显示：表格列；
}
.左，.右{
显示：表格列；
}
我不太确定您要解决的问题，但我假设您希望右侧的
与导航顶部平行
我唯一改变的是：
.right {
    width: 50%;
    float: right;
    overflow: hidden;
    text-align: right;
    position: relative;
    margin-top: -375px;  // Added this

}

这在移动设备上看起来不太好，因为div开始重叠，所以您需要执行@media css语句，在特定宽度后更新代码：
@media all and (max-width: 700px) {
.right {
    margin-top: 0px;
    }
}

在JSFIDLE上：