Question

我从事HTML和CSS已有几个月了，作为我网站的一部分，我开了个玩笑的假冒销售网站。我有点将其基于Amazon页面，在标题的左侧，左侧为图片，右侧为标题，右侧为产品说明。现在是的，我知道您在查看我的代码“他甚至还没有对他的描述做任何事情！”的想法，那里什么也没有，因为我很生气并且摆脱了我的CSS描述。您可以看到一个.description类，用于放置CSS及其类似内容。我尝试过将其向右浮动（无效），向右浮动，然后使用padding将其向某个方向推（无效），例如E.T.C.如果您想要完整的代码，我将其放在底部或其他位置。请告诉我如何获得标题下的描述？

（对于这段代码，我删除了一些不必要的位）

<!DOCTYPE html>
<html>
  <head>
    <title>merch for sale</title>
    <style>
      #merch{
        float:right;
        padding-right:100px;
      }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.description{

}
</style>
</head>
<body>


  <h1>
    <div id="merch">
    Hamsterlover606 merchandise for sale
    </div>
  </h1>
  <div class="description">
    <h3>
      Merchandise for Hamsterlover606.
      <br>
      <br>
      Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
      <br>
      <br>
    </h3>
  </div>
  </body>
</html>

The output of the code

这是完整的代码：

<!DOCTYPE html>
  <html>
   <head>
    <title>Hamsterlover merch for sale</title>
    <style>
      #merch{
        float:right;
        padding-right:100px;
      }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.description{

}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="buy.html">Buy</a>
  <a href="sell.html">Sell</a>
  <a href="about.html">About</a>
</div>
  <h1>
    <div id="merch">
    Hamsterlover606 merchandise for sale
    </div>
  </h1>
  <a href="pic1.html" target="_blank"><img src="https://cdn.glitch.com/d006369a-81f1-413d-a5cd-ce34e241b87c%2F775B0830-9365-46FF-AEF7-66F8939D8617.jpeg?v=1575572530269" height="500"></a>
  <div class="description">
    <h3>
      Merchandise for Hamsterlover606.
      <br>
      <br>
      Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
      <br>
      <br>
    </h3>
  </div>
  </body>
</html>

Answer 1

使用public void employeeMenu() { //ADD LOG OUT BUTTON SOMEWHERE //setting stage StackPane empMenuStage = new StackPane(); VBox empBox = new VBox(new Label("Employee Menu")); empMenuStage.getChildren().add(empBox); Scene empScene = new Scene(empMenuStage, 500, 500); Stage empStage = new Stage(); empStage.setScene(empScene); empStage.setTitle("Employee Menu"); TabPane tabPane = new TabPane(); Tab bookingReport = new Tab("Booking Report"); Tab checkOutGuest = new Tab("Check Out Guest"); Tab createGuestAccount = new Tab("Create Guest Account"); Tab editGuestInformation = new Tab("Edit Guest Info"); Tab createNewEmpAccount = new Tab("Create new Employee Account"); Tab editEmployeeAccount = new Tab("Edit Employee Account"); Tab editRoomStatus = new Tab("Edit Room Status"); tabPane.getTabs().add(bookingReport); //mitchell tabPane.getTabs().add(checkOutGuest); //emma tabPane.getTabs().add(createGuestAccount); //joey tabPane.getTabs().add(editGuestInformation); tabPane.getTabs().add(createNewEmpAccount); tabPane.getTabs().add(editEmployeeAccount); tabPane.getTabs().add(editRoomStatus); VBox tabBox = new VBox(tabPane); Scene scene = new Scene(tabBox, 500, 500); empStage.setScene(scene); empStage.setTitle("Employee Menu"); empStage.close(); empStage.show(); } public Tab displayEmpMenu(Stage empStage) { //button for check out a value guest //then enter name of value guest //Enter room of value guest //Confirmation Message (pick Y or N) Tab test = new Tab("hi"); Button valueGuest = new Button("Check out Value Guest"); Button generalGuest = new Button("Check out General Guest"); valueGuest.setOnAction(e -> checkOutVG()); generalGuest.setOnAction(e -> checkOutGeneral()); GridPane layout = new GridPane(); layout.setPadding(new Insets(10, 10, 10, 10 )); layout.setVgap(8); GridPane.setConstraints(valueGuest, 0, 0); GridPane.setConstraints(generalGuest,0, 1 ); layout.getChildren().addAll(valueGuest, generalGuest); Scene scene = new Scene(layout, 650, 200 ); empStage.setScene(scene); empStage.setTitle("Check Out Guest"); empStage.show(); //button for check out a general guest //button for return to employee menu return test; } public void checkOutVG() { TextField vgName = new TextField("Enter name of value guest"); String vgN = vgName.getText(); Label name = new Label("Value Guest Name"); TextField vgRoom = new TextField("Enter room of value guest"); Label roomNum = new Label("Value Guest Room"); double room = Double.parseDouble(vgRoom.getText()); int room1 = (int)room; freeThisRoom(room1); Label vgRoom1 = new Label("Value Guest Room"); TextField vgconfirm = new TextField("Confirmation: " + vgN + " is checking out of " + room1 + "(Y/N)"); vgconfirm.getText(); String text = ""; if (vgconfirm.getText().equalsIgnoreCase("Y")) { text = "Done. " + vgN + "is checked out of " + room1; } else { text = "You entered no. Please re-enter information."; } } public void checkOutGeneral() { TextField name = new TextField("Enter name of general guest"); Label ggname = new Label("General Guest Name"); String name1 = name.getText(); TextField room = new TextField("Enter room number of general guest"); Label roomNum = new Label("General Guest Room"); double ggNum = Double.parseDouble(room.getText()); int ggRoom = (int)ggNum; freeThisRoom(ggRoom); TextField vgconfirm = new TextField("Confirmation: " + name + " is checking out of " + ggRoom + "(Y/N)"); vgconfirm.getText(); String text = ""; if (vgconfirm.getText().equalsIgnoreCase("Y")) { text = "Done. " + name + "is checked out of " + ggRoom; } else { text = "You entered no. Please re-enter information."; } }对代码进行排序和分组。尝试将页面上的元素视为一个框中的不同组，并为每个组创建一个div。

要使带有文本的div出现在图像的旁边，请使图像div。

float: left

无法在CSS / HTML中将文字放在图片旁边

1 个答案: