显示块没有按预期工作...？
我知道这是一个常见问题，并且我已经尝试过搜索的方法。这是jsfiddle： http://jsfiddle.net/ZfZK9/ 这是我的问题
基本上，我已经有一个主 div 容器。它有一个图像和一些文本。我需要一侧是图像，另一侧是文本。我尝试将 img 放入 div 中，将其高度设置为 100%，然后将其向右浮动，但是正如您在 jsfiddle 中看到的那样，一旦文本位于图像下方，它就不会保持列形式。
我不确定为什么 display: block 和 height: 100% 在左列上没有任何作用。
谢谢
编辑：我假设 height: 100% 不起作用，因为它会被渲染，然后稍后添加文本。不过，我仍在努力寻找一种优雅且通用的解决方案。
另一个问题是，当我将两个 div（图像和文本）设置为 float: left 时，它只显示图像，然后显示其下面的文本
I know this is a common question and I've already tried the searched methods. Here is the jsfiddle: http://jsfiddle.net/ZfZK9/ and here's my problem
Basically, I've got a main div container. It has an image and some text. I need the image on one side, then the text on the other. I tried putting the img in a div, setting it's height to 100%, and floating it right, but as you can see in the jsfiddle once the text goes below the image it doesn't keep the column formation.
I'm not sure why the display: block and height: 100% aren't doing any good on the left column.
Thanks
Edit: I'm assuming height: 100% doesn't work because that gets rendered and then text gets added later. I'm still trying to find an elegant solution though, and general-purpose.
Another problem, is when I set both divs (of the image and of the text) to float: left, it just displays the image then the text under it
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你在 html 中有一些 css，在 css 中有一些，所以这很难理解。我相信我看到的是一个常见的错误，当你将某件事设置为 100% 时，你必须考虑，100% 是什么？它始终是该元素的父元素。那么父级设置为什么呢？如果什么都没有，那就是你的问题了。
请记住，如果父级也设置为 100%，则同样的问题也将适用。
编辑：我现在看到问题了。我误会了。然后您要做的是设置右侧 div（即带有文本的 div）的宽度。向右浮动，应该可以解决问题。
You have some css in the html and some in the css so this is hard to follow. What I believe I see is a common mistake where you must consider when you set something to 100% you have to think, 100% of what? It's always the parent of that element. So what is the parent set to? If nothing, there's your problem.
Just remember that if the parent is also set to 100%, the same question will apply.
EDIT: I see the problem now. I misunderstood. What you want to do then is set the width of the right div, the one with the text. Float that right and it should solve the problem.
可以这样做： http://jsfiddle.net/ZfZK9/34/
只需创建两个div 作为两侧的列，然后将两侧设置为特定宽度，然后调整填充和边距，直到获得所需的效果。
为了保持内容的边框，我添加了一个
clearfix，它将有助于包含两个浮动列....http://jsfiddle.net/ZfZK9/34/
必须编辑一些内容，花了一些时间才使其正确，但现在一切都应该可以正常工作。包含两个浮动 div，并添加了浏览器验证的clearfix。如果您希望图像或侧边栏显示为一直延伸到底部，请阅读假列< /a>
It can be done like this: http://jsfiddle.net/ZfZK9/34/
Just create two div's as columns around both sides, then set both those sides to a specific width, then play around with the padding and margin til you get what you want.
To keep your border around your content, I added a
clearfixwhich will help contain the two floated columns....http://jsfiddle.net/ZfZK9/34/
Had to edit a few things, took a bit to get it right, but now all should be working. Contains two floated divs, with a browser proof clearfix added to the mix. If you wanted the image, or the sidebar to appear as if it continues to the bottom, read about Faux Columns