1

I've tried to put a transitioning div next to a paragraph and for some reason it doesn't work? I'm not that good with html so can someone help me out?

.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>

Full Code Here

4

1 回答 1

0

我不确定您要在问题中解决什么问题，但我只是假设您希望该权利<div>与导航顶部平行。

我唯一改变的是：

.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;
    }
}

这是在 jsFiddle 上：http: //jsfiddle.net/wdrpkjap/5/

于 2015-03-29T01:52:49.683 回答