Question

我有一个没有正确对齐的容器div，也不能将div保持在右边或左边对齐的容器div中。它继续从主要的div或容器中出来。

这是我简单的主页设计，但根据这种布局，div没有正确缩进：

#container{
background-color:white;
width:100%;
height:1200px;

}

#logo{
background-color:yellow;
width:30%;
height:100px;
float:left;
}


#header{
background-color:green;
width:100%;
height:100px;
float:left;
}

#navigation{
width:100%;
height:40px;
background-color:white;
float:left;
}


#webname{
background-color:gray;
width:70%;
height:100px;
float:right;
}

#mainclass{

width:100%;
height:950px;
float:left;

}


#asideright{
background-color:red;
width:10%;
height:950px;
float:right;
}

#asideleft{
background-color:purple;
width:20%;
height:950px;
float:left;
}

#selection{
background-color:yellow;
width:70%;
height:950px;
float:center;
}

#footer{
background-color:green;
width:100%;
height:100px;
float:;left;
}

<html>
	<head>
	<title id="title">DUMMY
	</title>
	<link rel="icon" type="image/jpeg" href="dummy1.jpeg">
	<link rel="stylesheet" type="text/css" href="dumm1.css">
	</head>

<body>
	
	<div id="container">
	
		<div id="header">
			<div id="logo">
			</div>
		
			<div id="webname">
			</div>
		</div>
	
		<div id="navigation">
		</div>
	

		<div id="mainclass">
			<div id="asideleft">
			</div>
	
			<div id="selection">
			</div>
	
			<div id="asideright">
			</div>
		</div>
	
		<div id="footer">
		</div>
	</div>
	
</body>


</html>

Answer 1

没有float: center;这样的属性，您必须将#selection的该属性更改为float: left;。

请参阅this教程。

Answer 2

您可以使用此方法。

*
{
   margin: 0;
   padding: 0;
}
.container {
   width: 1170px;
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  background-color:red;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.inner_div
{
  width: 25%;
  float:left;
  
  background-color:green;
}
.big_div
{
  width: 75%;
  float:left;
  
  background-color:yellow;

}

<html>
	<head>
	<title id="title">DUMMY
	</title>
	<link rel="icon" type="image/jpeg" href="dummy1.jpeg">
	<link rel="stylesheet" type="text/css" href="dumm1.css">
	</head>

<body>
	
	<div class="container">
	
		<div class="row">
			<div class="inner_div" style="background-color:purple;">
                i'm the inner container
			</div>
		
			<div class="inner_div" style="background-color:pink;">
               i'm another one
			</div>
           
            <div class="inner_div" style="background-color:green;">
                another one
			</div>

            <div class="inner_div" style="background-color:orange;">
                woho! another one
			</div>

            <div class="big_div">
                yipee! i'm another container
			</div>
            <div class="inner_div" style="background-color:red;">
                yehaa! i'm another container
			</div>
		</div>
	
		<div id="navigation">
		</div>
	

		<div id="mainclass">
			<div id="asideleft">
			</div>
	
			<div id="selection">
			</div>
	
			<div id="asideright">
			</div>
		</div>
	
		<div id="footer">
		</div>
	</div>
	
</body>


</html>

Answer 3

这是你正确的CSS

public class Example {

    private static final int NUMBER_OF_CHILD_TASKS = 5;

    public static void main(String[] args) {
        ExecutorService executorService = Executors.newFixedThreadPool(Runtime.getRuntime().availableProcessors());
        ListeningExecutorService listeningExecutorService = MoreExecutors.listeningDecorator(executorService);

        List<ListenableFuture<String>> childTaskFutures = IntStream.range(0, NUMBER_OF_CHILD_TASKS).mapToObj(
                taskIndex -> listeningExecutorService.submit(new ChildTask(taskIndex))
        ).collect(Collectors.toList());

        ListenableFuture<List<String>> parentFuture = Futures.allAsList(childTaskFutures);
        try {
            List<String> results = parentFuture.get();
            results.forEach(System.out::println);
        } catch (Exception e) {
            // proper handling...
        }
    }

    private static final class ChildTask implements Callable<String> {

        private final String taskName;

        private ChildTask(int taskIndex) {
            this.taskName = "Task " + taskIndex;
        }

        @Override
        public String call() throws Exception {
            System.out.println(taskName + " executing...");
            Thread.sleep(1000);
            return "Result of " + taskName;
        }
    }

}

容器div没有正确对齐

3 个答案: