在智能手机和小型浏览器上没有垂直对齐的分区

Question

我的divs不会与垂直对齐叠加：

水平时很好：

垂直时不对齐：

我写内部CSS因为我在Magento的文本编辑器中插入我的页面。

https://jsfiddle.net/mastervision/8qqtadv0/

<div style="width:500 px">
<div style="float:left; margin: 0px 7px 0px 0px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div>
<div style="float:left; margin: 0px 7px 0px 7px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div>
<div style="float:left; margin: 0px 7px 0px 7px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div>

<div style="clear:both"></div>
</div>

Answer 1

你只是忘了你的第一个div上的填充物。这应该有用。

import sys
from student import Student
class StudentGradeSystem(object):
def __init__(self, score_file):
    self._score_file = score_file
    self._students = []
    self._class_avg = 0.0
    self._kor_avg = 0.0
    self._eng_avg = 0.0
    self._math_avg = 0.0
    self._register_students()

def _register_students(self):
    with open(self._score_file, "rt") as fp:
        lines = fp.readlines()
        for line in lines:
            items = (line.strip()).split(",")
            num = items[0]
            name = items[1]
            kor = int(items[2])
            eng = int(items[3])
            math = int(items[4])
            student = Student(num, name, kor, eng, math)
            self._students.append(student)

def _calculate_student_order(self):
    temp_students = sorted(self._students, key = lambda x: x.total, reverse = True)
    order = 1
    for student in temp_students:
        student.order = order
        order = order + 1
    self._students = temp_students

def _calculate_class_avg(self):
    total = 0
    for student in self._students:
        total = total + student.total
    self._class_avg = total / len(self._students)

def _calculate_kor_avg(self):
    total = 0
    for student in self._students:
        total = total + student.kor
    self._kor_avg = total / len(self._students)

def _calculate_eng_avg(self):
    total = 0
    for student in self._students:
        total = total + student.eng
    self._eng_avg = total / len(self._students)

def _calculate_math_avg(self):
    total = 0
    for student in self._students:
        total = total + student.math
    self._math_avg = total / len(self._students)

def _calculate_class_information(self):
    self._calculate_class_avg()
    self._calculate_kor_avg()
    self._calculate_eng_avg()
    self._calculate_math_avg()

def process(self):
    self._calculate_student_order()
    self._calculate_class_information()

def output_result(self, output_file):
    student_output_format = "번호: {:2}, 이름: {}, 국어: {}, 영어: {}, 수학: {}, 총점: {}, 평균: {:.2f}, 등수: {}\n"

    with open(output_file, "wt") as fp:
        for student in self._students:
            student_output = student_output_format.format(student.num, student.name, student.kor, student.eng,
                    student.math, student.total, student.avg, student.order)
            fp.write(student_output)

        fp.write("\n")
        fp.write("반 평균: %.2f\n" % self._class_avg)
        fp.write("국어 평균: %.2f\n" % self._kor_avg)
        fp.write("영어 평균: %.2f\n" % self._eng_avg)
        fp.write("수학 평균: %.2f\n" % self._math_avg)
    print("성적 처리가 끝났습니다.")


def main():
student_grade_system = StudentGradeSystem(sys.argv[1])
student_grade_system.process()
student_grade_system.output_result(sys.argv[2])
if __name__ == "__main__":
main()
input("end")

Answer 2

你的第2和第3个div有margin的{​​{1}}额外留下的所有内容保持一致

7px

示例：

margin: 0px 7px 0px 0px;

http://i60.tinypic.com/6ypsoh.png http://i60.tinypic.com/6ypsoh.png http://i60.tinypic.com/6ypsoh.png

如果您希望它垂直和水平对齐，请将<div style="float:left; margin: 0px 7px 0px 0px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div> <div style="float:left; margin: 0px 7px 0px 0px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div> <div style="float:left; margin: 0px 7px 0px 0px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div> 添加到第一个7px

div

示例：

margin: 0px 7px 0px 7px;

http://i60.tinypic.com/6ypsoh.png

http://i60.tinypic.com/6ypsoh.png     http://i60.tinypic.com/6ypsoh.png

Answer 3

第一个div的边距略有不同 - 它显示为左边距为0像素，而另外2个左边距为7像素。

Answer 4

工作正常，你输入了0px而不是7px。

http://i60.tinypic.com/6ypsoh.png

Answer 5

向三个div平均添加左右margin，并向外div添加否定margin。因此它在较大的屏幕中具有相同的间距，并且还在小屏幕中对齐。

选中此https://jsfiddle.net/afelixj/8qqtadv0/1/