Question

我什至不知道如何链接以显示问题，因为webpack和react将所有CSS组合为一件事.....

编辑：这是网站显示atm的代码库... https://codepen.io/livebacteria/pen/bJpRxq

import cv2

im = cv2.imread("images/lena.jpg")
im_blurred = cv2.GaussianBlur(im, (11,11), 10)
im1 = cv2.addWeighted(im, 1.0 + 3.0, im_blurred, -3.0, 0) # im1 = im + 3.0*(im - im_blurred)
plt.figure(figsize=(20,10))
plt.subplot(121),plt.imshow(cv2.cvtColor(im, cv2.COLOR_BGR2RGB)), plt.axis('off'), plt.title('Original Image', size=20)
plt.subplot(122),plt.imshow(cv2.cvtColor(im1, cv2.COLOR_BGR2RGB)), plt.axis('off'), plt.title('Sharpened Image', size=20)
plt.show()

但是，我的问题是我正在尝试构建一个您所熟悉的聊天应用程序/网站。也许像万物松弛。我在使用不同的组件时遇到主要的重叠问题。我希望顶部的标题栏保持顶部，左侧的导航栏也保持顶部，最后，内容应可滚动。

我什至不知道从CSS开始。.我已经完成了很多教程，但是没有任何意义。感觉CSS的功能远胜于js。.大声笑...回到这里，唯一可以实现边栏外观的代码就是位置：css中的固定样式。我已经读到，这可能会导致其他/ fixed /元素出现重大问题，而且确实有问题。

任何建议或帮助都是至关重要的，并且令人难以置信：：

我对css越是迷惑，它变得越糟，因为它变得如此糟糕，我不得不重新启动几乎整个项目。

Answer 1

我猜您想在左侧显示roomListInfo，在右侧显示roomContent？

一些快速修复：

您需要它们并排而不是彼此堆叠。您可以通过使它们都为display: inline-block并使roomListInfo具有width: 15%来匹配width: 85%上的roomContent来实现。好像您尝试将其添加到room-list上一样，因此应撤消该操作。

接下来，让roomContent紧贴两个元素现在都存在的“行”（因为它们现在都在一行，就像一行文本）的顶部，而不是坐在底部在其中添加vertical-align: top。

Answer 2

有多种方法可以解决此问题。 CSS可能一开始就令人困惑，但是一旦掌握了核心概念（类，Id，声明），这将变得更加容易。

一个很好的技巧是将CSS分成自己的文件，然后使用

加载它

<head>
<link rel="stylesheet" type="text/css" href="YOUR_CSS_FILE_NAME.css">
</head>

我一定会从这个页面开始一个接一个。不要试图一次做太多事情，也不要被淹没。

在进入下一部分之前，请仔细阅读每个部分。

对于下面的示例，我模拟了将CSS放入另一个文件中，然后将其移至CSS窗口并删除了样式标签。

然后我浏览并更改了一些HTML，并根据我认为您的要求添加了适当的样式。

这只是解决此问题的一种方法，并不意味着它是最好的。

https://codepen.io/anon/pen/ROaZGo

非常奇怪的CSS格式与react应用程序，主要重叠。我该如何解决？

2 个答案: