Question

我是CSS的菜鸟，我正在玩CSS和DIVS，一切顺利，直到我决定将2个Div放入其中。我可以把一个div放在另一个div里面，但是当我把它放到2时它只是bug。 I could put the green Div inside of yellow div but not the cyan

这是我的HTML：

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Languages</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="(URL LINK)/clients/1080/Canon.html?lc=uk" target="test">English</a>
    <a href="(URL LINK)/clients/1080/Canon.html?lc=de" target="test">German</a>
    <a href="(URL LINK)/clients/1080/Canon.html?lc=fr" target="test">French</a>
    <a href="(URL LINK)/clients/1080/Canon.html?lc=es" target="test">Spanish</a>
    <a href="(URL LINK)/clients/1080/Canon.html?lc=it" target="test">Italian</a>

  </div>
</div>
<pre>
  <code>&lt;iframe&gt;src="Path of the zip file" scrolling="no" seamless="seamless"&gt;&lt;/iframe&gt;</code>
</pre>

CSS

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.GridLayout;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.border.LineBorder;

public class DisplayItems3 {

    public static void main(final String[] args) {

        JFrame frame = new JFrame();

        final int FRAME_WIDTH = 1000;
        final int FRAME_HEIGHT = 1000;

        frame.setSize(FRAME_WIDTH, FRAME_HEIGHT);
        frame.setTitle("Home Library");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLayout(new FlowLayout());

        // Top Panel
        JPanel p1 = new JPanel();
        p1.setLayout(new FlowLayout());
        p1.setBackground(Color.LIGHT_GRAY);
        p1.setPreferredSize(new Dimension(950, 100));

        JLabel l1 = new JLabel("All Library Items");
        l1.setForeground(Color.BLACK);
        l1.setPreferredSize(new Dimension(900, 50));
        l1.setFont(l1.getFont().deriveFont(30.0f));

        p1.add(l1);

        // Content Panel
        JPanel p2 = new JPanel();
        p2.setLayout(new GridLayout(-1, 1));
        p2.setBackground(Color.LIGHT_GRAY);
        p2.setPreferredSize(new Dimension(950, 800));
        p2.setAutoscrolls(true);

        JScrollPane scrollPane = new JScrollPane(p2);
        scrollPane.setHorizontalScrollBarPolicy(
                JScrollPane.HORIZONTAL_SCROLLBAR_NEVER);
        scrollPane.setVerticalScrollBarPolicy(
                JScrollPane.VERTICAL_SCROLLBAR_AS_NEEDED);
        scrollPane.setBounds(0, 0, 950, 800);

        JPanel contentPane = new JPanel(new BorderLayout());
        contentPane.setPreferredSize(new Dimension(950, 800));
        contentPane.add(scrollPane, BorderLayout.CENTER);

        for (int i = 0; i < 20; i++) {

            JPanel sp1 = new JPanel();
            sp1.setLayout(new FlowLayout());
            sp1.setBackground(Color.WHITE);
            sp1.setPreferredSize(new Dimension(900, 180));
            sp1.setBorder(new LineBorder(Color.RED));

            p2.add(sp1);

        }

        // contentPane.add(p2);
        contentPane.add(p1, BorderLayout.NORTH);
        // frame.add(p2);
        // frame.setContentPane(contentPane);
        frame.add(contentPane);

        frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
        frame.setVisible(true);

    }

}

感谢。

Answer 1

最好的方法是使用#previousmonth float：left和#nextMonth float：right

你不应该使用边距功能来实现这一点，下面是使用float命令修正的两种样式

#previousMonth{
width:12%;
float:left;
height:100%;
background-color: green;
text-align: center;
}

#nextMonth{
width:12%;
height:100%;
float:right;
background-color: cyan;
text-align: center;
}

Answer 2

DeskDocker.Properties.Settings.Default.DockItem1 = openfile.FileName;
                pictureBox1.Image = Icon.ExtractAssociatedIcon(DeskDocker.Properties.Settings.Default.DockItem1).ToBitmap();

body{
height:500px;
width:600px;
}
#table{
width:50%;
height:70%;
background-color: red;
margin: 0 auto;
}

#year{
width:100%;
height:10%;
background-color: blue;
margin: 0 auto;
text-align: center;

}
#month{
width:100%;
height:10%;
background-color: yellow;
margin: 0 auto;
}

/*wrapped them in div so they can be one group*/
#pager{
height:100%;/*tells the pager to take 100% of parent's height(month)*/
}
#pager div{/*tells the child divs of pager to have same properties*/
display:inline-block;/*this will display contents side by side one another*/
width:12%;
height:100%;
}

#previousMonth{
background-color: green;/*assign properties that are unique to the child*/
}

#nextMonth{
background-color: cyan;
float:right; /*  this will make it float to right */
}
#monthname{
text-align:center;
}

我对你的代码进行了修改。你需要告诉元素该做什么。另外，尽量不要向子节点编写相同的代码，因为它们将继承父节点的属性。按F12将告诉您元素在渲染时具有哪些属性。希望这可以帮助。祝你好运，编码愉快。

在1 Div内插入2个Div（一个在左侧，另一个在右侧）

2 个答案: