我怎样才能修复div的边距

时间:2016-10-28 10:19:00

标签: html css



<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>module2-solution</title>
</head>
<style >
	/*basic style*/
	* {
		box-sizing: border-box;
	}
	body {
		background-color: #9E8851;
	}
	h1 {
		margin: 100px;
		text-align: center;
		font-family: Helvetica;
		font-weight: bold;
		font-size: 300%;
	}
	section {
		position: relative;
		width: 100%;
	}
	p {
		position: relative;
		clear: right;
	}
	div {
		position: relative;
		background-color: #BF7F3F;
		border: 1px solid black;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
	}
	.sub {
		float: right;
		width: 100px;
		padding: 5px;
		margin: 0px;
		border: 1px solid black;
		text-align: center;
		font-size: 120%;
		font-weight: bold;
		background-color: #B0D619;
		
	}
	.content {
		padding: 5px;
		border: none;
		background-color: #BF7F3F;
		font-family: Helvetica;
		color: black;
		margin: 0px;
		height: 200px;
		overflow: auto;
	}
	
	.row {
		width: 90%;
	}
	

	/*desktop version*/
	@media (min-width: 992px){
		.column-lg-4 {
			float: left;
			width: 33.33%;
		}
	}
	/*tablet version*/
	@media (min-width: 768px) and (max-width: 991px){
		.colmn-md-6 {
			float: left;
			width: 50%;
			margin-left: auto;
			margin-right: auto;
		}
		.colmn-md-12 {
			float: left;
			width: 100%;
			margin-left: auto;
			margin-right: auto;
		}
	}
	/*mobile version*/
	@media (max-width: 767px){
		.colmn-sm-12 {
			float: left;
			width: 100%;
		}
	}

</style>
<body >
<h1>Our Menu</h1>
	<section class="column-lg-4 colmn-md-6 colmn-sm-12">
		<div>
			<p class="sub">Chicken</p>
			<p class="content">
			Popular chicken dishes include roasted chicken, fried chicken, chicken soup, Buffalo wings, tandoori chicken, butter chicken, and chicken rice. Chicken is also a staple of many fast food restaurants.
			</p>
		</div>
	</section>
	<section class="column-lg-4 colmn-md-6 colmn-sm-12">
		<div>
			<p class="sub">Beef</p>
			<p class="content">Spiced beef is a cured and salted joint of round, topside, or silverside, traditionally served at Christmas in Ireland. It is a form of salt beef, cured with spices and saltpetre, intended to be boiled or broiled in Guinness or a similar stout, and then optionally roasted for a period after.</p>
		</div>
	</section>
	<section class="column-lg-4 colmn-md-12 colmn-sm-12">
	<div>
		<p class="sub">Sushi</p>
			<p class="content">Sushi can be prepared with either brown or white rice. It is often prepared with raw seafood, but some common varieties of sushi use cooked ingredients and many are vegetarian. Sushi is often served with pickled ginger, wasabi, and soy sauce.</p>
	</div>
</body>
</html>
&#13;
&#13;
&#13;

当我将网页大小更改为宽度从768px到991px之间的范围时,我希望第三部分自行获取整行。然而,第三部分的左边缘和右边缘不与第一部分的左边缘和第二部分的右边缘垂直对齐。我该如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

(defun shell (&optional buffer)
  "Run an inferior shell, with I/O through BUFFER (which defaults to `*shell*').
Interactively, a prefix arg means to prompt for BUFFER.
If `default-directory' is a remote file name, it is also prompted
to change if called with a prefix arg.

If BUFFER exists but shell process is not running, make new shell.
If BUFFER exists and shell process is running, just switch to BUFFER.
Program used comes from variable `explicit-shell-file-name',
 or (if that is nil) from the ESHELL environment variable,
 or (if that is nil) from `shell-file-name'.
If a file `~/.emacs_SHELLNAME' exists, or `~/.emacs.d/init_SHELLNAME.sh',
it is given as initial input (but this may be lost, due to a timing
error, if the shell discards input when it starts up).
The buffer is put in Shell mode, giving commands for sending input
and controlling the subjobs of the shell.  See `shell-mode'.
See also the variable `shell-prompt-pattern'.

To specify a coding system for converting non-ASCII characters
in the input and output to the shell, use \\[universal-coding-system-argument]
before \\[shell].  You can also specify this with \\[set-buffer-process-coding-system]
in the shell buffer, after you start the shell.
The default comes from `process-coding-system-alist' and
`default-process-coding-system'.

The shell file name (sans directories) is used to make a symbol name
such as `explicit-csh-args'.  If that symbol is a variable,
its value is used as a list of arguments when invoking the shell.
Otherwise, one argument `-i' is passed to the shell.

\(Type \\[describe-mode] in the shell buffer for a list of commands.)"
  (interactive
   (list
    (and current-prefix-arg
         (prog1
             (read-buffer "Shell buffer: "
                          ;; If the current buffer is an inactive
                          ;; shell buffer, use it as the default.
                          (if (and (eq major-mode 'shell-mode)
                                   (null (get-buffer-process (current-buffer))))
                              (buffer-name)
                            (generate-new-buffer-name "*shell*")))
           (if (file-remote-p default-directory)
               ;; It must be possible to declare a local default-directory.
               ;; FIXME: This can't be right: it changes the default-directory
               ;; of the current-buffer rather than of the *shell* buffer.
               (setq default-directory
                     (expand-file-name
                      (read-directory-name
                       "Default directory: " default-directory default-directory
                       t nil))))))))
  (setq buffer (if (or buffer (not (derived-mode-p 'shell-mode))
                       (comint-check-proc (current-buffer)))
                   (get-buffer-create (or buffer "*shell*"))
                 ;; If the current buffer is a dead shell buffer, use it.
                 (current-buffer)))

  ;; On remote hosts, the local `shell-file-name' might be useless.
  (if (and (called-interactively-p 'any)
           (file-remote-p default-directory)
           (null explicit-shell-file-name)
           (null (getenv "ESHELL")))
      (with-current-buffer buffer
        (set (make-local-variable 'explicit-shell-file-name)
             (file-remote-p
              (expand-file-name
               (read-file-name
                "Remote shell path: " default-directory shell-file-name
                t shell-file-name))
              'localname))))

  ;; The buffer's window must be correctly set when we call comint (so
  ;; that comint sets the COLUMNS env var properly).
  (switch-to-buffer buffer)
  (unless (comint-check-proc buffer)
    (let* ((prog (or explicit-shell-file-name
                     (getenv "ESHELL") shell-file-name))
           (name (file-name-nondirectory prog))
           (startfile (concat "~/.emacs_" name))
           (xargs-name (intern-soft (concat "explicit-" name "-args"))))
      (unless (file-exists-p startfile)
        (setq startfile (concat user-emacs-directory "init_" name ".sh")))
      (apply 'make-comint-in-buffer "shell" buffer prog
             (if (file-exists-p startfile) startfile)
             (if (and xargs-name (boundp xargs-name))
                 (symbol-value xargs-name)
               '("-i")))
      (shell-mode)))
  buffer)